Floating an image inside colour div bkground

[Salbert]

Hi,

I wanted to make elements on a site more prominent by adding a background colour and border (creating a box) as a sort of feature. When I add an image into this 'feature' box and float it so it appears to the left if the image is longer than the text content in the box it overlaps the bottom of the box. I've tried to illustrate this below....

STYLE:
#feature {
background-color:#EEEEEE;
border:1px solid #D7D7D7;
padding:10px;
}
.floatL {
float:left;
padding:0px 10px 0px 0px;
}

CODE:
<div id="feature">
img src="#.jpg" alt="#" width="80" height="61" border="0" class="floatL">
<p>Text content....</p>
</div>

Painfully simple I know , I'd be glad for any advice, Thanks.

[moojoo]

Floated elements are not in the normal document flow. And thus it will overlap the box if the image is taller than the content. a quick fix would be to do something like:

.clearing {height:0; clear:both;}

<div id="feature">
img src="#.jpg" alt="#" width="80" height="61" border="0" class="floatL">
<p>Text content....</p>
<div class="clearing">&nbsp;</div>
</div>

[Ryan Fait]

You can also specify an exact height for #feature by adding this to its properties:

height: 71px;

[Salbert]

Brill, Thanks guys.