Force Div To Accomidate Image (min-height Not Working)?

I've got a bunch of divs, one after the next, each with an image inside it. When I set min-height to a value higher than the height of the image, everything works fine: But if I h

Solution 1:

Add clear: left to your div.

See this?

.postimage {
    float: left;
    padding-right: 10px;
}

When you float the contents of the div, the div does not stretch vertically to accommodate.

So, adding this:

.reply {
    min-height: 50px;
    padding: 10px;
    background-color: #eeeeee;
    font-size: 14px;
    margin: 10px;
    clear: left;
}

Will resolve the issue.

Alternate solution Another solution which I tend to prefer is to use the overflow hack, rather than clear:

.reply {
    min-height: 50px;
    padding: 10px;
    background-color: #eeeeee;
    font-size: 14px;
    margin: 10px;
    width: 100%;
    overflow: hidden;
}

You would expect that this would hide the part of the image below the div, but it has a different result: The overflow: hidden does not hide the contents, but rather causes the div to stretch down to contain the entire image.

Note: for this method to work on older browsers, you must specify a width (notice that I added that in the css above).