Make The Height of a Parent Div Wrap Around The Children with Float

Using floating divs is great, but can cause lots of other issues sometimes. One particular one is getting the height of a parent div to wrap around its children if the children have the float attribute.

There are several ways to do this mentioned in this Stack Overflow post, but here is the one that worked for me:

Use the :after psuedoelement on the parent div with the following CSS:

.parent:after {
  content: "";
  display: table;
  clear: both;	
}

Advertisements