CODEWITHSUNDEEP
htmlcsscss-float
nowayyy
nowayyy

Reputation: 917

Can't clear element after floating it to the right

I can never clear a element for some reason, its just to confusing!. I try this: 

.clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
* html .clearfix             { zoom: 1; }  /*IE6*/ 
*:first-child+html .clearfix { zoom: 1; }  /*IE7 */

to the parent element, and nothing works! Really confusing :/

http://pastebin.com/qAGaCYbH

Upvotes: 1

Views: 82

Answers (2)

Code Maverick
Code Maverick

Reputation: 20415

Try this from html5boilerplate.com:

/* The Magnificent Clearfix: 
   Updated to prevent margin-collapsing on child elements. 
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 
}

.clearfix:after { 
    clear: both; 
}

/* Fix clearfix: 
   blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix { 
    zoom: 1; 
}

Upvotes: 1

Karl Laurentius Roos
Karl Laurentius Roos

Reputation: 4399

You should apply the .clearfix class to your element. I guess it's #page-wrap that you want to clear. To apply the .clearfix class to that div, write: <div id="post-wrap" class="clearfix">

Upvotes: 1

Related Questions