3 columns layout via DIVs (middle-flexible, all fl

Question

Hey guys, I've struggled with this for a bit and don't seem to find a solution. Need an advise or the simple statement saying this is impossible (so far I think it is - impossible). Problem is: need 3 column flixible width layout, left fixed width, right aswell, middle - takes all of the space provided by body or whatever. Trick is that either right or left columns might be taller then middle, and we need them not to overlap the footer. Also docmode is Strict. I know that Table solves the problem in a sec, but I wonder is there a Div solution around?

Answer 1

No tables challenges are a bit like waving a red flag to a bull for me:

http://edeverett.co.uk/experiments/noTables2.html

Tested in IE7, FF3, Chrome 2.

This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.

(I've edited the example html to show how to include content in the centre section)

Answer 2

YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.

Answer 3

This is what you're looking for I think:

http://matthewjamestaylor.com/blog/perfect-3-column.htm or with pixel widths: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

It's XHTML strict, and supports all current browsers.