CSS Tricks: Three ways to clear floats. «

Hello Developers. We feel clearing floats is a nice issue to discuss on. Not to waste your much time, lets start with it.
The Problem: For Example, we have HTML as:

   This is left side  This is right side   

And its css as:

.single-comment{border:1px solid #000}


The issue is that border of div single-comment will collapse (height of div is collapsed).

Lets move to the solution:


Put float left in class “single-comment” too. i.e.
.single-comment{border:1px solid #000;float:left}


Put width:100% and overflow:hidden in class “single-comment”. i.e.
.single-comment{border:1px solid #000;width:100%; overflow:hidden}


Add an empty div in HTML as clearing floats. i.e

  This is left side  This is right side     

And add css for class=”clear” as

.clear {clear:both}

Hope you will enjoy using floats and they are not anymore hectic. cheers!!!

Scroll to Top