Sent by Alex Robinson on 18 February 2003 17:05
At 10:02 am -0600 18/02/2003, Joseph McBride wrote:
>Looking for 3 column layout with:
>
>-Static width left and right columns
>-Header and footer that display properly (ie uncovered by other columns and
>appearing in appropriate locations)
>-Document order of columns is left, center, and right
>
>I have been searching here:
>http://css-discuss.incutio.com/?page=ThreeColumnLayouts and a few other
>places and have been unsuccessful.
Yes, you would have been.
To achieve the ordering you want left-center-right, you have two options
A. Ordered Floats
Ordered Floats would do for you if were happy to accept a static central
column to go with your fixed-width side columns. Or if you were prepared to
let everything be liquid.
Unfortunately you can't mix the two in the order you want since floats must
by definition have a width. And the css can't be smart enough to deduce
what the width of the viewport minus the widths of the side columns is.
Unless you were to adjust it via javascript on load and on resize.
B. Absolute positioning
Would be fine for you except for the issue of footer. The only way to get
the footer to appear in a suitable place is to place inside and at the end
of the longest columns. If you can't guarantee that any column will be the
longest this is a non-starter. It also now means that you have code that
looks like left-center(footer)-right which probably defeats the purpose of
structuring the document that way inn the first place.
Except the above is wrong ;) You just have to mix it up a bit.
<http://www.fu2k.org/alex/css/cssjunk/1-2-3-absolute.mhtml>
Works in Geckos, Operas, IE5(mac) and IE6. I can't test in IE5.*(pc) at the
moment. No doubt it fails there.
All the columns are within a containing div which is positioned relatively.
The side columns are positioned absolutely. The central column has its
margins left and right set. The central column div has to be contained
within a redundant container div else IE6 goes gaga (why I have no idea).
And that's it. Of course, the footer will only appear in the correct place
if the central column is the longest. So you must be sure that a particular
column will be the longest - which column that is though is fairly
irrelevant
<http://www.fu2k.org/alex/css/cssjunk/1-2-3-absoluteB.mhtml>
NB. the distance between the columns and the footer varies from browser to
browser in these examples. I'm sure that with more effort and perhaps some
judicious hacking that inconsistency could be squelched.
