wkaqza
Last Updated: February 25, 2016
·
738
· mikeballan

Clearing floats 2.0

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..!

2 Responses
Add your response

6163

Here's my two cents on clearing floats without markup:

.container:after{
    content: '.'; height: 0;
    display: block; visibility: hidden;
    clear: both;
}
over 1 year ago ·
6167

Nice, although in the lovely IE7 and below "content" isn't supported so this could cause problems?

over 1 year ago ·