Firefox CSS div / box model problem

The Problem: You've structured your page using a whole bunch of divs. Perhaps #top, #centre, #footer. Everything is inside #wrapper. Inside #centre you have several divs of class ".container". The containers comprise mainly of images - some of which are loaded from external sites. The containers are floated left so that their internal contents can also be floated. This is a standard scenario.

In firefox (1.5-2.0+), particularly if the images load slowly, there is an "overlap" effect, by which as the container divs fill up and expand themselves, the #footer, which has already been rendered, appears underneath the container divs.

In other words, the footer shows up first because it is just text and is rendered quickly. It will appear at the bottom of the page, say at 1000px down the page. The bug or feature in firefox means that as the divs above it expand they run down the page over the top of the footer which stays static in the place it was first loaded.

The Solution!
It is imperative that for every floated box/div, you also have specified a clear parameter. For things like content containers, or main page containers you can use clear: both. And for more complex layouts where you are mimicking tables, you can use clear: left or clear: right.

In my particular situation, I had not floated the #center div, and thus had also not specified a clear param. So, leaving #wrapper to take care of the centred positioning, I added the following lines to #centre:

float:left;
clear:both;

And for good measure, I added these to .container:

clear:both;


This seems to ensure that firefox will correctly push already rendered boxes down the page. Not sure if it's a bug or not. I guess it is, since in my understanding, divs have clear:both set by default, i.e. they are designed to act as paragraphs. I have seen other fixes such as the clearfix and the setting of height to 100%, but these didn't work for me. Perhaps they didn't apply.

Anyway, deep sigh of relief.