3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)

Go To StackoverFlow.com

1

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?

2009-06-16 10:31
by Brock
not a real suggestion but... http://giveupandusetables.com - Jonathan Fingland 2009-06-16 10:34


4

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.

2009-06-16 10:36
by CtlAltDel
more likely, he wants this one: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.ht - Jonathan Fingland 2009-06-16 10:38
You're right, added the pixel widths to my answer - CtlAltDel 2009-06-16 10:58
Yep, the pixel width is the one I'm looking for. Thanks a lot - Brock 2009-06-16 11:14


0

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.

2009-06-16 10:36
by Staale


0

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)

2009-06-16 11:01
by edeverett
Not sure this will work in Strict mode, the second link in first answer is the solution, even thought it's pretty hacky : - Brock 2009-06-16 11:19
I've updated it to be valid strict XHTML- it doesn't make a difference. Yeah, the above link does work - I just wanted to give myself a quick test and I think my solution is simpler, the other might be more robust though - edeverett 2009-06-16 12:14
Ads