At some point, most HTML developers end up in a situation where they use the float:right and/or float:left property and then notice that the DIV going around it isn't wrapping the content anymore.

Broken Example

You can reproduce this in the physical world by holding an elastic band open with your fingers. Holding your fingers in the same position, pull them out from elastic band. With nothing left inside to hold the shape of the elastic, it shrinks back to it's original shape. This is what is happening with your outer DIV.

Hello World!

Working Example of the Solutions

The idea and easiest solution is to add overflow:auto; to the outer DIV:

<div style="border:1px solid red;width:500px;padding: 10px;">

Unfortunately, depending on your CMS, modifying the outer div may not always be possible. What you can do instead is to insert the following line before the last </DIV>:

<div style="clear:both;"></div>

Hello World!

Notice that the red border will then wrap around the content. Here is the full source code:

<div style="border: 1px solid red; width: 500px; padding: 10px;">Hello World!
<div style="float: left;"><img alt="" src="http://lorempixel.com/200/200/" /></div>
<div style="float: right;"><img alt="" src="http://lorempixel.com/200/100/" /></div>
<div style="clear:both;"></div>
</div>

You could further minimize the impact of the style with the following properties:

clear:both; height:1px; margin:0; padding:0;

Related Posts: