SyntaxHighlighter

Monday, November 17, 2008

Nesting floating DIV overflow problem

I had an issue with non-IE browsers where a floating div would oveflow its parent container.

Here's an example:
<div id="Container" style="background-color: Blue; width: 400px; padding: 10px;">
<div id="Image" style="float: left;">
<img src="http://www.google.com/images/logo.gif" />
</div>
Some text yada yada. Some more text yada dada.
</div>

One can solve this issue by simply adding a div that places a break after the floating div:
<div style="clear: both; font: 1px/1px sans-serif;">&nbsp;</div>

So in the end, it should look something like this:
<div id="Container" style="background-color: Blue; width: 400px; padding: 10px;">
<div id="Image" style="float: left;">
<img src="http://www.google.com/images/logo.gif" />
</div>
Some text yada yada. Some more text yada dada.
<div style="clear: both; font: 1px/1px sans-serif;">&nbsp;</div>
</div>