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}
.left{float:left;width:200px;}
.right{float:left;width:200px;}
The issue is that border of div single-comment will collapse (height of div is collapsed).
Lets move to the solution:
Solution:1
Put float left in class “single-comment” too. i.e.
.single-comment{border:1px solid #000;float:left}
Solution:2
Put width:100% and overflow:hidden in class “single-comment”. i.e.
.single-comment{border:1px solid #000;width:100%; overflow:hidden}
Solution:3
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!!!