Clear a floating element without additional markup

Found at: Position is everything

Normally you would add an element like this:

<div style="clear:both">&nbsp;</div>

after your floating elements to clear them. With this method you don’t need to do this anymore.

Just add this to your stylesheet:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

and also add the “clearfix” class to the element that wraps your floating element. That’s it.

Leave a comment

2 Comments.

  1. What do you mean exactly by “add the “clearfix” class to the element that wraps your floating element.”

    You lost me there?!

    Am I supposed to add something in the php files or in the CSS-files?!?

    I’m a bit new to this.

    / Anders

  2. Thanks for your question.
    What I mean by that is that you have to add the class “clearfix” to the surrounding element, like so:

    <div class="mysurroundingelement clearfix">
    <div class="floatingelement">...</div>
    <div class="floatingelement">...</div>
    </div>

    I hope that answers you question Anders?

Leave a Reply


[ Ctrl + Enter ]