Can someone solve strange float:left issue?

[mobotech]

Hi guys, please look at this page http://htmlnewbie.x10hosting.com

For some reason the 60th Anniversary Laker image is both floating on the second paragraph when it should each be floated left with the 1st and and parapgraph wrapping around the image.

Can someone look at the code and tell me what the problem is and how to fix it? It seems to affected by the #nbalogo id.

Here is what it should look like:
http://imagefrog.net/out.php/i55824_floaterror.jpg

[codeexploiter]

Change the existing CSS of the following with this one. Check the new code introduced which is highlighted


#content p {
background-color:#EBEBEB;
border:5px double #1B1464;
overflow:hidden;
padding:1em;
}

Hope this helps

[mobotech]

Change the existing CSS of the following with this one. Check the new code introduced which is highlighted


#content p {
background-color:#EBEBEB;
border:5px double #1B1464;
overflow:hidden;
padding:1em;
}

Hope this helps

thanks, it worked. can you explain what happened?

[jscheuer1]

The overflow hidden clears the float of the image. Ordinarily, one might use the standard method of inserting an empty block level element with clear left just before the end of each p, but a block level element in a p causes a p to auto close, which would actually make matters worse. Even when this method works (which it will with other elements besides a p), it's messy in that it clogs up your markup with seemingly unnecessary elements.

Interestingly, in IE 7 and less, which auto clear floats in many cases, it looked fine to begin with.

See also:

http://www.quirksmode.org/css/clearing.html