Check out the Latest Articles:
Clearing Floats

This is nothing complicated. But what usually what happens is I set this up in my stylesheets and then adding a bunch of other lines to it and can never remember what the good bits of css are that helps me clear the floats.

Essentially here is the setup:

<div id="container">
  <div class="float">
     <p>OMG CONTENT</p>
  </div>
  <div class="float">
    <p>OMG MOAR CONTENT</p>
  </div>
</div>

Now you need the css behind it:

#container {
  width: 100%;
  overflow:auto;
  border: 1px solid #000000;
}

.float {
  float: left;
  width: 50%
}

The important bits is that you have floating elements in a container, so you need the css code to get it to float. Next is that your container needs the overflow:auto; the width needs to be there for IE to trigger hasLayout, so you can set the width to something other than 100% or you could use something else to trip hasLayout.

And that’s it. I had no plans to go in great detail of how this works, or why it works, or why you want to do it.



  1. program tv on Monday 6, 2010

    Good post over again! I am looking forward for your next post;)

  2. Praca telemarketer Kielce on Monday 6, 2010

    Heya i am for the first time here. I came across this board and I find It truly useful & it helped me out a lot. I hope to give something back and aid others like you aided me.

  3. transportation costa rica on Monday 6, 2010

    make it simple and short.

  4. Lambskin Rugs on Monday 6, 2010

    This is really an impressive write-up! I’ve book-marked it and emailed it out to every one of my buddies simply because I know they shall be fascinated, thank you very much!

  5. Paul Jones on Monday 6, 2010

    Fun website!

  6. Alex Thompson on Monday 6, 2010

    Fantastic web site!

  7. Roobert Ramirez on Monday 6, 2010

    Well designed webpage!

  8. hon indonesia on Monday 6, 2010

    hey.. nice post man.. very interesting.