CSS: clear: left working too well?

Question

I have an issue every now and again and I'm not sure what the solution is.

I have a 2 column layout (left strit, and then main area). In the main area, I sometimes have a secondary 2 column layout (eg - for a news section, where there is an icon, and then the news item). When I clear left on the new item, instead of clearing the image above it (which is left floated) it clears the nav bar on the left.

Here is a sample. This seems to be an issue on FF3.6, whereas IE8 seems fine.

Answer 1

for the #mainContent add overflow:auto; or overflow:hidden; to clear the floats. Read more here http://www.quirksmode.org/css/clearing.html

Answer 2

On your <div> that contains each news section, try adding overflow: hidden. I think that should isolate the uses of clear within that <div>.

Answer 3

Instead of using columns for you news columns to separate icons and text - what if you use a "float:left" on the image? For example, look on this page:

http://clayclerk.com/

The Css styling for the image is:

.imageleft {
float:      left;
margin-right:   10px;
}