I've just spent an hour wrestling with CSS to try and achieve the holy grail of a Slashdot style layout in pure CSS again. The current trick is to have header, float left column, float right column, centre column, footer with clear both. This works and you're looking at it right now. But it would be good if the document sequence was actually header, centre, left column, right column, footer as the margins often contain links to external websites that can take some time to fill. The effect is that the margins appear before the centre.

So I had this cunning plan to wrap the middle vertically between the header and footer in a dummy div with relative positioning, and then to set the left and right column to absolute positioning. So I'd have header, middle, centre column, left column, right column, middle end, footer. By setting the middle to overflow:auto, it should contain the longest of left, centre and right columns and the footer should then float below this.

It works beautifully in Firefox. Needless to say it doesn't work in IE6 as overflow:auto in IE6 only works on absolute position blocks and starts throwing scrollbars. If a left or right column is longer than the center column, it overlaps the footer.

Arrghh! Why is CSS so hard? It's enough to make you go back to tables. I suppose there's always a chance that IE7 will fix all this, but I'm not putting any money on the table.


[ << SAJAX - Simple Ajax Toolkit by ModernMethod - XMLHTTPRequest Toolkit for PHP ] [ Web Fonts >> ]
[ 04-Mar-05 4:24pm ] [ , ]