Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Quick Tip: Clear CSS Floats

I notice a lot of people like to float elements all the time but don’t clear them correctly. I’ll shed a little insight on this in the future but for now, here’s a quick snippet of code that I use all the time to clear css floats.

The css snippet is as follows:
[code language=”css”]
.clear:before,
.clear:after {
content:"";
display:table;
}
.clear:after {
clear:both;
}
.clear {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
[/code]

The semi-serious explanation of how and why to use this.

Most people when floating and clearing an element write code similar to the following:
[code language=”html”]
<div id="parentDiv">
<div class="float:left"></div>
<div class="float:right"></div>
<div class="clear"></div>
</div>
[/code]

The issue with this is you have to add an unnecessary empty tag everywhere. When you have a lot of elements floating you can see how this can quickly start to get frustrating.

So instead, to fix your floating woes, add the above css to your style sheet, and rework the code as follows:

[code language=”html”]
<div id="parentDiv clear">
<div class="float:left"></div>
<div class="float:right"></div>
</div>
[/code]

Tada! Just add the clear class to the parent div. Now you just learned an incredibly easy way to clear css floats!

Resource: css tricks

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on Quick Tip: Clear CSS Floats

  1. download says:

    whats your twitter?

    1. Jonathan says:

      @SureFireWebServ

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top