Fixing Floating DIV

Fixing Floating DIV

I have written an article about two and a half years ago about how to fixing floating DIV issue. Here is its link http://blog.webcomers.com/css-floats-vs-clear-div

Today i would like to discuss about a new approach, that is more cleaner and requires less number of HTML and CSS code and is adopted by HTML/CSS frameworks like Twitter Bootstrap and i really liked it because of the reason that it saves me a lot of junk HTML code. The previous technique which you can see in the mentioned url was good but was confusing and yet it would add too much empty DIV’s in your code which i guess shouldnt be followed now as we have a very cleaner way of doing the same. Here is the code

CSS code for Fixing Floating DIV’s

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

HTML Code for Fixing Floating DIV’s

<div class="main-container clearfix">
     <div class="left-main-content"></div>
     <div class="right-side-bar"></div>
</div>

The earlier version that i discussed was

<div class="main-container clearfix">
     <div class="left-main-content"></div>
     <div class="right-side-bar"></div>
     <div class="clear"></div>
</div>

As you can see from both examples that in the latest approach we are saving 1 line of code. As i believe in today’s internet world you have to save even bits while the page loads, and this one line in up to 10 places can easily grow up to 1kb of code which is really heavy.

Please make sure you dont add “clearfix” class to the DIV or any other element that is supposed to float to the left or right, only add clearfix to those elements which are not floating and they needs to create a block to maintain its structure on a user machine.

I hope this article will help you understand the latest approach of using clear DIV’s

.