Designing wordpress theme problem

Question

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!?

Inspect the document with a document inspector like Chrome's "right-click > inspect element", or Firebug. It will show you where the element goes to. — Pekka, Apr 13 '11 at 18:10
what are the element's x and y coordinates? Maybe it is hidden behind some other element? — Pekka, Apr 13 '11 at 19:40
I realize now I totally misread your question. I'm sorry. Disregard my comments. — Pekka, Apr 13 '11 at 21:24

score 1 · Answer 1 · answered Apr 13 '11 at 19:13

1

The boxes are "floating" on top of the wrapper. Simply add clear:both; to #wrapper. Oh and by the way, you don't need to create 3 element for your margin, you can write it on one line, like that margin:0 10px 10px 0; (top, right, bottom, left) Also a little trick you should use when debugging css, add border:solid 1px red; so you can see what you are doing.

answered Apr 13 '11 at 19:13

Alexcp

348
1
6

clearing both didn't work. Margins r in one line firebug shows them separately. i already tested border with firebug, wrapper is before boxes, on top, a very narrow horizontal line – Mehdi Apr 13 '11 at 19:24

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

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.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 13 '11 at 21:25

Pekka

442,112
142
972
1,088

score 0 · Answer 3 · answered Apr 13 '11 at 18:18

0

You will need a clearfix http://www.webtoolkit.info/css-clearfix.html

answered Apr 13 '11 at 18:18

Rochester Oliveira

1,443
1
11
10

Designing wordpress theme problem

3 Answers3