• Clearing floats 2.0

  Date: Mar 9, 2011  |  Categories: Css  |  Written By: Mike Ballan  

So ever had the problem of having a div float left and another float right only to have to use the classic div with a class of clear:both on it only to have a little padding at the bottom of the divs, well that is no longer a problem if you use the following code.

So the old way was to add in the clear:both class to a div below the floated divs

<div class="clear:both"></div>

But this new method doesnt need this as all you have to do is wrap your floated divs in another div like below.

.container {
	overflow: hidden;
	width: 100%;
}

.left {
	width: 50%;
	float: left;
	background-color:#333;
}

.right {
	width: 50%;
	float: right;
	background-color:#666;
}

So you would have your code like follows:

<div class="container">
	<div class="left">Text here...</div>
	<div class="right">Text here...</div>
</div>

And there you go no more clearing your div and having that little bit of padding at the bottom of it..!