Table-less format

[DigitalBard]

I am trying to create a standard looking web page (top area, left column, middle area, right column) without using tables, but I'm having trouble.

http://www.digibard.org/css_test.html

According to my book, width and height in CSS should be relative to the parent container. But they aren't, they are relative to the browser area.

Also, I can't get the text in the middle area to wrap without setting a width, but I can't get width to be a percentage relative to the container.

Can I get some help? :)

ps. I am using Firefox 3.01 to view the page.

[DigitalBard]

Btw, if I change it to use fixed sizes for everything, it works fine, but I want the flexibility of variable width.

[boogyman]

when creating a 3column css layout, you need to have the main "center" section declared first in the html. Then apply the left float to the section that will be on the left and a right float that will be on the right. The last thing is to create a width for each side column, then create left and right margins on the main content and voila you shall have a standards compliant, best practices, seo 3 column website.



<div id="container">
<div id="top_area">
top
</div>
<div id="middle_area">
middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle middle
</div>
<div id="left_column">
left
</div>
<div id="right_column">
right
</div>
<div id="bottom_area">
footer stuff
</div>
</div>


Visit http://matthewjamestaylor.com/blog/perfect-3-column.htm for a great article about 3column css layouts

[DigitalBard]

Thanks, I'll take a look at that site. It's still not working. :(

[BLiZZaRD]

What you are looking for is called the "Holy Grail" 3 -Column layout. Using Divs, nested properly, you can achieve this with relative ease. here is a link (http://matthewjamestaylor.com/blog/perfect-3-column.htm) That will cover the hows and whys of this and several other layout types, without using tables.

Good Luck!

[Eternal_Howl]

Hi there,

I found this site quite helpful - it has various 3 column layouts (header - left, content, right - footer).

http://pmob.co.uk/temp/3colfixedtest_explained.htm

Heaps of working examples.