How to make div height increase to include floated image

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

Try something with JavaScript maybe:

window.onload = FixMyDiv();

function FixMyDiv()
{
  var divh = document.getElementById('main_contentbox').style.offsetHeight;
  var imgh = document.getElementById('sample').style.offsetHeight;

  if(divh < imgh + 50) document.getElementById('main_contentbox').style.height = imgh + 50;


}

Answer 3

Here's an interesting link with some common CSS Gotchas. Number 2 offers an alternative solution to the one given here (ie the clearfix mentioned by Gaby) and the rest are also great to know about and keep in mind.

Answer 4

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 the main_contentbox to grow to contain its floats, no matter what page you're on.