Web Developer Juice - By web developers for web developers

There are many ways to clear “float” property in css. The most common problem with float property is , it collapse the parent div container.

For example if you have HTML:

1
2
3
4

<div class="line">
    <div>This is line one </div>
    <div>This is line one </div>
</div>

For above HTML you have CSS as:

1

.line div{float:left}

Now what will happen, your div having class “line” will get collapsed due to float left property given to inner element.
By collapsed div we mean , if you give border to div “line” , you will see only one straight line rather a block.

To overcome this problem we have one very good trick which is compatible with every modern web browser.

Here we go:
Simply place a new div having class “clear” . That is like:

1
2
3
4
5

<div class="line">
    <div>This is line one </div>
    <div>This is line one </div>
    <div class="clear"></div>
</div>

After this write css for div “clear” as

1
2

.line div{float:left}
.clear{clear:both}

All done!! Your problem of collapsed div is now solved.

Cheers!