After about an hour of trying to work out why the spacing between my posts was working in Internet Explorer but not in Firefox, I stumbled upon a common issue.

If a Div contains floating divs it will not resize the height to contain the floating divs. So adding padding to the containg div has no effect. This is how floating divs are supposed to behave. IE ignores this and contains them anyway, but most other modern browsers follow the rules and let the inner divs float ‘uncontained’.

The simple solution to this problem is to include and empty div after the floating divs and within the container. This empty div must not have a floating property and must be set to clear the floating divs. This gives the container div something to wrap around. The code will look something like this:

<div class="container">

<div class="float-left"> </div>

<div class="float-right"> </div>

<div style="clear:both;"> </div>

</div>

So the magic bit is "<div style="clear:both;"> </div>" just insert it just before you close the container div.

This entry was posted on Friday, August 7th, 2009 at 11:30 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.