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

Add overflow: hidden; to #wrap. This is a clear fix. Here's some documentation about it: http://positioniseverything.net/easyclearing.html

LE: There are also multiple ways you can achieve this, depending of the browser compatibilty:

1. Add overflow: hidden to the parent container.

#wrap { overflow: hidden; }

1. Use a pseudo-element to add clear: both .

#wrap:after { clear: both; content: ""; display: table;}

1. The most commonly used tehnique is to add an extra as the last element of the parent container.

I preffer not to use the 3rd one as you get extra HTML markup.