I've got 4 divs inside a parent div. To get them to appear side by side, I've given all 4 divs a style with float:left. The divs do appear side by side, but the parent div's height does not grow to encompass the height of the child divs. What am I missing?
Html – side by side divs
csshtml
Best Answer
This is a quirk cause by the implementation of floating elements, and occurs when you have a parent element that contains nothing but floating child elements. There are two methods to solve it. One is to set the parent element's
overflow
property tohidden
, sometimes known as the overflow method. The other is known as the clearfix method, and involves the use of the:after
pseudo-class.The clearfix method has the advantage of allowing for specifically positioned elements to "hang" outside of the parent container if you ever need them to, at the expense of a bit of extra CSS and markup. This is the method I prefer, as I utilize hanging elements frequently.