How to make div height increase to include floated image
css, html
Solution
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; }
Problem
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> ```