How to fit a div's height to wrap around its floated children

Question

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

Answer 1

I've come to start using this "micro-clearfix" solution from Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Just add that to your CSS and any floated element, add the "cf" class to the wrapper of any any element that has floated children.