This is a hodgepodge to try and get several things working simultaneously:
- Support for the browsers that have at least 1% share in the server logs: IE6, IE7, Firefox
- If possible, support other browsers, in order of precedence: IE5, Safari, Opera
- Three columns of equal height:
- The ability to change column widths using only CSS
- Column reordering is unimportant
- Drop shadows around the entire layout
- Relative links within the layout should not cause cutoff issues
Standards Compliant
The standards compliant version of this page just uses a CSS display of table to make the three columns. The drop shadow is a containing table. This works in:
- Firefox 1.5.0.6
- Opera 9.00
- Safari 2.0.3
Internet Explorer
Internet Explorer doesn't support display: table. So, instead everything is floated and trickery is done to make things render correctly.
IE5.5 and IE6
IE5/6 uses the technique from One True Layout of setting an absurd amount of padding on the columns and then an opposite negative bottom margin. This causes the columns to extend below the end of their container. Normally you would have to specify overflow: hidden to cause that content not to display, but IE6 does it by default. In fact, I don't know how to avoid it.
Things are a little tricky with the shadows as well. In the original layout, the left column is a fixed pixel width, the right column is a percentage and the center fills the rest. I do not know how to do this with floats with a document order of 123 (it is easily done with document order 132) without using absolute positioning. (Absolute positioning will break the overflow trick.)
For the reason the sizes had to be altered slightly and everything specified as percentages. (Since the parent is a percentage, it isn't possible to use pixel widths.)
This layout mostly works. It relies on quirks mode which may make it unsuitable for some uses. There is also about 5px of overflow of the shadows at the bottom of the page:
IE7
IE7 correctly implements overflow, so the long columns can't be used anymore. Setting overflow: hidden isn't an option because it will break relative links. So, this uses another trick from Position Is Everything. The heights are set in CSS with an IE proprietary expression statement.
This statement was very volatile. If it was a pixel too large it would cause the containing block to expand and reevaluate the statement. This would then be off by another pixel which would set the loop going forever and lock the browser. Likewise, if it was too small the loop would shrink the container to nothing. Even if the page loaded correctly, resizing the window could set off this behavior (I assume from a rounding issue).
My fix expands the expression statement to full-blown javascript, but it seems to avoid the resizing issues. It inserts a class attribute, height-processed, to signify that the statement should not be reevaluated. When the page is resized, elements with that class are adjusted. It is more complex than is desirable, but resizing the page can't cause the browser to lock which I see as worth it.
This works in:
- Internet Explorer 7.0RC1
Quirks Mode
Quirks mode on different browsers cause this to render in different ways. This document has an <?xml ?> declaration and a doctype. This should only trigger quirks mode in IE6. To see how this document renders, this document can be shown:
If the two divs are the same width, IE is in quirks mode.
Weird Firefox Bug
I wouldn't believe this was actually happening, had I not tested it repeatedly. When I open this page served from my webserver, the right-hand column is wrapped to the next line in standards compliant mode in OSX and ok in quirks mode. It looks ok in both modes for me in XP. In Linux it is wrapped in both but not when served by Apache on the box. (All three servers: work, home and web are running Apache 2.) My brother says that it wraps for him in XP until he opens the developers tools, it pops into place.
Honestly, I've never seen anything like it. It can be fixed though by making the container for the columns display: table-row rather than table. This, however, causes the header to display below the body in Safari.
The page is currently using display: table-row, but the page can also use display: table.
Source
This page includes some basic PHP to handle testing conditions. The source is available.