div background-color not filling entire box

[jebadoa]

I have a div that contains a header, an image, and some text. The image is floated left, and the text is to the right of it. The image is taller than the text block. The trouble is, the background color stops where the text stops, not where the image stops. Incidentally, the border does not show in IE7 either. Noob needs help!

.entry {
background-color:#999;
outline:2px solid #750082;
margin-top:10px;
margin-bottom:10px;
padding:3px 3px 8px 3px;
height:auto;
clear:both;
}
.entry img{
float:left;
position:relative;
z-index:1;
}
.title {
font-size:x-large;
background-image:url(../images/Bkgd2.gif);
background-color:#D8CBD8;
padding:inherit;
color:#4A004C;

}
.post {
height:100%;
padding-top:5px;
font-size:larger;
color:#4A004C;
}
.date {
font-size:small;
font-style:italic;
text-align:right;
}

<div class="entry">
<div class="title">Title of the post
<div class="date">date of post</div>
</div>
<div class="post"><img class="alignnone"
title="title of pic"
src="http://etc" alt="alt val" width="200" height="260" />"
Text content
</div>
</div>

[jebadoa]

Here's what I did in case anyone has the same problem:

Added
<div class="clear"></div>
inside the div that contained the text and image.

Then in CSS:
.clear {
clear:both
}

No clue why it works, but it does. If anyone wants to explain it, I'm all ears.

[jscheuer1]

That will work, but since you are only floating left, you only have to clear left. The way that this works is that floated items have no intrinsic layout height unless you set one. So the background will extend only so far, perhaps not at all, it depends upon what's in the float. But once you clear the float, that element is in the normal flow of the document, so anything behind and containing it must extend at least to its position.

This doesn't apply to IE, at least not in all cases. IE often treats floats like any other block level element as far as background goes, which isn't a problem because it will work fine with the clear element, it just doesn't always need it.