Разработка темы WordPress

Question

Я создаю тему WordPress с нуля. Я использовал ящики для постов - два поста в строке. Код CSS:

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

и есть обертка для упаковки всех полей на странице:

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

}

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

так что все ящики в упаковке. Теперь проблема заключается в том, что обертка не отображается - на странице нет белого фона, но как только я удаляю обертку свойства float, она вступает в игру. Как я могу это исправить!?

Answer 1

Коробки «плавают» сверху обертки. Просто добавьте ясно: оба; к # обертке. Да, и, кстати, вам не нужно создавать 3 элемента для вашего поля, вы можете написать его в одну строку, например, это поле: 0 10px 10px 0; (сверху, справа, снизу, слева) Также небольшую хитрость, которую вы должны использовать при отладке css, добавьте border: solid 1px red; так что вы можете видеть, что вы делаете.

Answer 2

Дайте элемент-обертку overflow: hidden.

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

Это принятый метод для выполнения этой работы во всех браузерах.Он работает лучше и с меньшими хлопотами, чем обходной путь clearfix.

Answer 3

Вам понадобится исправление http://www.webtoolkit.info/css-clearfix.html