TW Blog :: Archives for July 2003

The Fallacy Of Floating

Relates to CSS Design

Finally got round to downloading the Mozilla 1.4 CR build last night, and been playing around setting up as my default development browser today. I had rarely used the DOM inspector in older versions, but now realising what a handy inclusion it is for mapping out errors, especially when working with absolute positioning in CSS using the Box Dimensions.

I did get a bit of a shock to discover that the WWT rebuild I created last week was totally reluctant to display in the new browser. A quick run through Firebird confirmed this was a conflict between the CSS I had declared and the Mozilla browsers.

The original stylesheet positioned each column using the float:left property - I knew there were problems with cutting off text in IE6 when assigning float to div containers, but had not seen it in Moz before. The culprit was the relative declaration of the footnote, however I decided an alternative approach was called for. So a quick clean up operation!

1. Replaced
   div {float:left}
   with
   div {position:absolute;left:0} and div {position:absolute;right:0}
   for the left and right columns respectively. And, stripped the float from the central column, redeclaring the margins accordingly.
2. Since the page does not spread full screen, also had to declare the container as absolute to keep the columns together. This led to a further problem with the footnote element (in all browsers( which was only resolved by moving it inside the container as well.
3. The main affect on the document structure of this is that the right column must be placed above the central column in the document structure tree. But this is not detrimental to the logical flow in this particular instance.
4. Oh, and finally, I resolved some of the gap discrepancies in the sidebars by declaring the images as block level. Now the display is almost identical across all visual browsers.

Here is the result And I guess the the lesson is, Mick,

If you play with float you play with fire!

Posted on Saturday, Jul 05, 2003 at 17:19:06.