How to stretch a container around a float
One common problem I've seen many developers encounter occurs when the height of a floating object exceeds that of the rest of the content. The container conforms to the height of the content, excluding the floating object:
As seen above, the intention of the developer was to have the green background surround both the image and text, but the image ended up overflowing. The desired appearance is:
What happened? Because the image is floating, it is taken out of the normal document flow. In this context, it takes up no space at all.
No need to resort to fixed height containers, or use of tables just yet. There are workarounds!
Method 1: Add "overflow: hidden" to the container. (live demo)
<div style="background:#557755;padding:5px;overflow: hidden">
<img style="float:left;margin:5px" src="michael_jackson.jpg" alt="Michael Jackson">
<b>Top 5 Michael Jackson Songs</b><br>
5. Beat it<br>
4. Billie Jean<br>
3. Black or White<br>
2. Man in the Mirror<br>
1. Thriller
</div>Method 2: Add a 0 height clearing object to the flow. (live demo)
<div style="background:#557755;padding:5px">
<img style="float:left;margin:5px" src="michael_jackson.jpg" alt="Michael Jackson">
<b>Top 5 Michael Jackson Songs</b><br>
5. Beat it<br>
4. Billie Jean<br>
3. Black or White<br>
2. Man in the Mirror<br>
1. Thriller
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>Of the two, method 1 is more simple to implement, but I've found method 2 to have a higher success rate with less CSS conflicts, and works with the infamous IE6. In most cases method 1 should be sufficient, but keep method 2 handy for those few cases where it doesn't.
Written by JMack
Related protips
3 Responses
Thanks! Another solution: http://jsfiddle.net/hbA35/5/
@jverdeyen That's one I haven't seen before. I like it!
I would stick to html5-boilerplate's clearfix: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L159-179
