Best way to implement a 3-column website using <DIV> tags? [closed]

Question

I'm developing a 3-column website using a layout like this:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

But, considering the default CSS 'position' property of <DIV>'s is 'static', my <DIV>'s were shown one below the other, as expected.

So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'s to -(minus) the height of the preceding <DIV>. It worked fine, but this approach brought me two problems:

1) Even though Internet Explorer 7 shows three columns properly, it still keeps the vertical scrollbar as if the <DIV>'s were positioned one below the other, and there is a lot of white space after the content is over. I would'n like to have that.

2) The height of these elements is variable, so I don't really know which value to set for each <DIV>'s 'top' property; and I wouldn't like to hardcode it.

So my question is, what would be the best (simple + elegant) way to implement this layout? I would like to avoid absolute positioning , and I also to keep my design tableless.

Answer 1

If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.

This article in particular should help you out.

Answer 2

Give BluePrint CSS a try. It is really simple to get started with, yet powerful enough for most applications.

Easy to understand tutorials and examples. Has a typography library that produces decent results straight out of the box.