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.
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.
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>:
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;
2016-11-19 at 5:50 AM
There are a few different ways to overcome this issue. My preferred method is option 3 of the methods shown here: https://css-tricks.com/all-about-floats/#article-header-id-4
2017-01-23 at 5:03 PM
Thanks for taking the time to share this solution. That is indeed a good way to work around the issue. Note that your solution uses CSS3. If backwards browser compatibility is important, one of the other solutions should probably be used instead.
Thank again for sharing. That CSS tricks site is pretty useful. 🙂