I’m having a problem with a div that partially collapses (in all major browsers). The situation is very simple: I have a DIV around <h3>, <img> and <p> tags. The DIV has a 1px border. I want the <h3> and <p> to flow around the <img>, but once I give the <img> a style of float:left; the DIV collapses to the height of the <p> so that the border is actually under the <img>. Here’s the code:
<div id="lead">
<img src="images/lead.jpg">
<h3>Here's a header</h3>
<p>So the guys who created Bugs and Daffy often slipped private jokes into the cartoons which have been meticulously catalogued in this Tripod site complete with images and sound. Don’t miss out on the discussion board! <a href="http://www.website.com">More</a></p>
</div>
and CSS:
#lead {
overflow:visible;
padding-bottom:10px;
margin:10px 10px 10px 10px;
background:#FFF;
border-bottom:1px #999 solid;
}
#lead h3 {
color:rgb(194,5,170);
font:bold 16px Verdana, Helvetica, Arial, sans-serif;
}
#lead img {
margin: 0 10px 10px 0;
}
Thanks for any help/suggestions.