How to make div height increase to include floated image

Question

This is the problem. I have an div which includes a few paragraphs of text in it and then an image which is floated right. The image floats right as it should but the containing div does not expand vertically to accommodate for the image. I know that I can manually set the height of the div but this becomes problematic because I would like to use this same div for each page of my site and thus the heights will need to be different.

Here is a code sample:

#main_contentbox {
  width: 918px;
  margin: 10px auto;
  padding: 10px 20px 20px 20px;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

#main_contentbox img#sample {
  float: right;
}

<div id="main_contentbox">
  <h1 class="page"> The Event </h1>
  <img id="sample" src="sample.jpg" />
  <p>
    stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!</p>

  <p>stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!


</div>

Answer 1

You can change the behaviour of how parent blocks deal with floated content by changing the overflow property. This should do it:

#main_contentbox { overflow: hidden; }

Answer 2

While @cletus's solution is technically correct, setting overflow to any value other than overflow: visible (the default), initial (explicitly use default), or inherit with a visible parent will result in the element creating a new block formatting context. A block formatting context is a region in which floating elements can interact with blocks. This situation (floated element inside of a non overflow:visible element) is explicitly listed as the reason for the creation of a new context being a necessity:

"if a float intersected with the scrolling element it would forcibly rewrap the content. The rewrap would happen after each scroll step, leading to a slow scrolling experience." - mdn

As a result, the height will be be recalculated for any immediate children within this new context, and their heights will be included.

I prefer to use overflow: auto to accomplish this when I can, but scroll, overlay, or hidden will all produce the desired result of including the float in the calculation of the height of the parent element.

Answer 3

Using an :after pseudoclass, you can have the named div automatically append a clear fix. Add this to your css file:

#main_contentbox:after {
  content: "Foo";
  visibility: hidden;
  display: block;
  height: 0px;
  clear: both;
}

With that in place, you don't have to do anything to force main_contentbox to grow to contain its floats, no matter what page you're on.