Thursday, October 6, 2011

Dump Your "clear:both", an Alternative to Clearing Floats

One of the traditional ways to solve the clearing floats problem is by adding an extra element and make it "clear:both".

<div style="clear:both" />

However this method has some draw backs :-
  1. The clear both contributes nothing meaningful to the markup besides it's used to fix a floating issue.
  2. It adds extra bits to your html code.
Let me show you another way of solving this problem without using an extra markup, the only thing you need to do is :-
  1. In your css where your container that contained the float elements, add
    • min-width ( or width or height )
    • overflow:hidden
That's all you need.  Well, I know if is not very intuitive, and if you still don't understand what I'm talking about,  here is the example,

Let me know your thoughts!

Note: Oh, btw, I believe everyone is using "clearfix" nowadays, it seems to be a standard method in the industry.  And I brought it up in this post is just in case someone out there is still using <div style="clear:both"> .

No comments:

Post a Comment