[RESOLVED] Applying a background to a div with an image

[Windhorse]

Hello,

I am attempting to style a div that contains some text and an image. My goal (for the purpose of this example) is to apply a solid background color to the div. My problem is that the background color only covers the text of the div. If the height of the image is greater than the height of the text, the background color does not surround the image. I have posted an example of this here: http://windhorsemedia.com/private/20091008/.

Because I am working with auto generated content (Joomla CMS), I can't fix this by just specifying a height for the div or adding some inserting page breaks into the HTML to ensure the height of the text is greater than the image.

Thanks in advance for any suggestions on how to address this.

[Windhorse]

I resolved this issue by inserting a div below the content and applied the display: bock attribute to it.

HTML
<div id="wrapper">
<div id="main">
<div id="content">
<div id="page">
<h2 class="contentheading"><a href="#" class="contentpagetitle">Heading</a></h2>
<p><img class="page_img" style="margin-left: 10px; float: right;" src="image_placeholder.jpg" height="150" width="120" />Main paragraph...</p>
<div id="fix_div_height">&nbsp;</div>
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>

CSS
#wrapper {
width: 640px;
height: auto;
margin: 30px auto;
}

.contentheading {
background-color: #FF3;
}

#main {
background-color: #6F0;
}

#footer {
background-color:#09F;
}

#fix_div_height {
height: 1px;
display: block;
clear: both;
text-indent: -9999em;
}