making a div have a minimal size or expand

Hi

Trying to make a box (with a div and css to control it) that will fit around an image and some text. The image is 90 x 90 pixels and should have a margin of 10 pixels around it so I want my box to be a minimum of 110 pixels high - heres the catch, the text is never the same length its actually printed into the page from some php so the box needs to never go smaller than the image and its margins however if the text is of greater height than those the box needs to expand. This is what I have so far...


<style>
.floatimage
{
float: left;
padding: 1px;
margin-right: 10px;
background-color: #CCCCCC;
}

.floatbox
{
width: 380px;
padding: 10px;
background-color: #ff0000;
height: 112px;
}
</style>

<div class="floatbox">
<div class="floatimage"><img alt="" src="image/icons/icon.php" /></div>
<p>
The float property allows other text to fit itself around a box. This is
particularly useful with images, but it can be used in any way.
</p>
<p>
I've created this example with enough text that it should wrap around
the above floated paragraph. Let's keep going to see what happens.
Does it really do what I think it should do?
</p>
</div>


but when i give the box a height its fixed and when i don't it can go smaller than the image - is there a way to do this?

Thanks in advance

a+
gar

Use the clearing class to force the in-the-flow div to drop down to clear the float. If content would clear it anyway, no problema. Don't give the float holder a height, and it will naturally grow as needed for content. If IE has a brainfart, make the floatholder {position:relative;}

cheers,

gary