How to fit a div's height to wrap around its floated children
css, css-float, html
Solution
This is a common issue when working with floats. There are several common solutions, which I have ordered by personal preference (best approach first):
Use the ::after CSS pseudo element. This is know as the 'clearfix', and works IE8 and up. If you need compatibility with earlier versions of IE, this answer should help. Example.
.parentelement::after {
content: "";
display: table;
clear: both;
}
Add the two floats into a container with the CSS attribute `overflow: auto` or `overflow: hidden`. However, this approach can cause issues (e.g. when a tooltip overlaps the edges of the parent element a scrollbar will appear). Example.
<div style="overflow: auto">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Add a set height to the parent element. Example.
<div style="height: 200px">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Make the parent element a float. Example.
<div style="float: left">
<div style="float: left"></div>
<div style="float: left"></div>
</div>
Add a div after the floats with `clear: both`. Example.
<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>
Problem
I have a div wrapped around two children, one floated left and the other right. I want to put a border and background around the children, but the div has 0 height since it doesn't resize to fit the children. Here is an example of it in action: http://jsfiddle.net/VVZ7j/17/ I want the red background to go all the way down. I've tried height:auto, but that didn't work. Any and all help would be appreciated, thanks. P.S. I don't want to use any javascript if that's possible.