Last Updated: February 25, 2016
·
1.189K
· jsrockstar

Prevent parent div from collapsing when inner children are floating

There are many solutions for this problem-

1 - (CSS) Using Overflow attribute

Set the attribute overflow:hidden; for the parent div
This solution might not work on every browser.

<div style="overflow:hidden">
    <div style="float:left"></div>
    <div style="float:right></div>
</div>

2- (HTML + CSS) Using an extra div inside parent

Create an extra div with 0 height and width and set attribute clear:both;
This will place the extra div below the floating div and allow parent to maintain its structure

<div>
    <div style="float:left"></div>
    <div style="float:right></div>
    <div style="clear:both"></div>
</div>