Search code examples
wordpressfloating

Designing wordpress theme problem

I'm designing a wordpress theme from scratch. I used boxes for posts - two posts per row. The CSS code is:

#box  {
margin-bottom:10px;
margin-left:0;
margin-right:10px;
width:240px;
}
.left {
float:left;
margin-left:10px;
}

and there's wrapper to wrap all boxes in page:

#wrapper{
     width:980px;
     background-color:#fff;

}

<div id="wrapper">
<div id="box" class="left">
...WP tags and...
</div>
</div>

so all boxes are in the wrapper. Now the problem is wrapper doesn't show up - no white background on the page, but as soon as i remove float property wrapper come into the play. How can I fix that!?

Solution

  • Give the wrapper element overflow: hidden.

    #wrapper{
    overflow: hidden;
    width:980px;
    background-color:#fff;
}

    It is the accepted method of making this work across all browsers. It works better and with less hassle than the clearfix workaround.