Div float problem in Firefox – Background content not automatically resizing

I’ve had this problem several times and each time it catches me out so this time I’m blogging about it so I don’t forget myself. Sometimes designers need to arrange divs into columns whilst allowing the page to grow vertically based on content in these columns.

A problem can happen in Firefox when divs are floated left and right, which is not an error in rendering it must be said but a problem that comes from an expected behaviour.

Sometimes when you float divs the containing element does not automatically resize with the expanding inner divs. This is because the divs are outside the normal flow of the document and the browser tries to float text around these divs.

To fix it is simple however,

Basically what I do is create an outer div called container. Within this container I place the two floating divs and finally I place a div at the bottom of these to clear the floats.

Here’s the code, hope it helps someone out there:

<div style="width: 800px" >
<div style="float: left; width: 480px; margin-right: 40px">Left Content</div>
<div style="float: right; width: 280px">Right Content</div>
<div style="clear:both">&nbsp;</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *