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..!
Written by Mike Ballan
Related protips
2 Responses
Here's my two cents on clearing floats without markup:
.container:after{
content: '.'; height: 0;
display: block; visibility: hidden;
clear: both;
}
Nice, although in the lovely IE7 and below "content" isn't supported so this could cause problems?
