Dan Dan - 3 years ago 162
HTML Question

How to make div height increase to include floated image

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:

HTML

<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>


stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!stackoverflow is awesome!



CSS

#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;}

Answer Source

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; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download