How to fix the issue of CSS collapsing parent having floating children
Answer: Use the CSS
When float property applied to the element inside the non floated parent, the parent element doesn't stretch up automatically to accommodate the floated elements. This behavior is typically known as collapsing parent. This is not always obvious if you do not apply some visual properties like background or borders to the parent elements, but it is important to be aware of and must dealt with to prevent strange layout and cross-browser problems.
ExampleTry this code »
<title>Fixing Collapsing Parent Issue</title>
border: 1px solid #000000;
<div class="container clearfix">
<div class="column-left">Floated to left.</div>
<div class="column-right">Floated to right.</div>
Check out the tutorial on CSS alignment for more solutions on fixing collapsing parents.
Here are some more FAQ related to this topic: