Table Style Layout in CSS (question)

[helio]

I was going to do a friend a favor by recoding his portfolio page (he uses dreamweaver) and I realized I didn't really know how to do it properly.

How would I go about lining up where it says Portfolio, then has the name, then under is Type:, then properly aligned is the type of site.

What is the best way to go about doing this?

[David Harrison]

Got anything we can look at?

[helio]

doh! that's what i get for posting at 1am or whatever time it was. I meant to post the link www.thrivefx.com

sorry about that and i appreciate your interest in helping

[TymArtist]

helio,

if you're looking to space the text and images in the fashion that it's featured on these individiual areas of the page, there are several different ways to go about it.

the method I would personally use is using nested divs, although perhaps this will be called out as not the best way to do it. regardless, here's the code for the XHTML as i would put it:

<div class="container">
<img src="blah.jpg">
<div class="heading">
Project
</div>
<div class="blurb">
slashtRend
</div>
<div class="heading">
Type
</div>
<div class="blurb">
Website Design etc
</div>
<div class="heading">
Description
</div>
<div class="blurb">
slashtRrent has taken the plunge...
</div>
</div>

Then you style your CSS a little something like...
.container {
width: 500px;
margin: 50px;
padding: 20px;
}
.container img{
float:left;
width:200px;
}
.heading{
float:left;
width:100px;
padding: 10px;
height: auto;
}
.blurb{
float:left;
width:200px;
padding: 10px;
}

i might be a little off with this, as i typed it all in about 2 minutes - be wary of the height:auto, as perhaps you will have to float header and description to the right rather than the left so the height doesn't match up with the image instead of the description. on the other hand, it could work fine.

the reason i went with the div's separate is that if you try to put each column in one, you'll end up with a lot of <p></p> junk code that you don't really need. <div> tags in the long run end up being a lot less junky than table tags, which is why i neglected to surround anything in a table.

that's your basic idea. feel free to private message me.

[David Harrison]

Here's my go at it. Had some rather annoying problems with IE and had to change the markup somewhat to get it to look right in it.

I used <h2>'s for the headers in each of the sections, that's because I assume you would use <h1> for the main page header.

[helio]

wow, thankyou so much guys. i really appreciate it!