проблема с позиционированием div ниже нескольких float влево div

Question

Немного сложно описать проблемы css, но я сделаю все возможное.

Ниже моей навигационной панели у меня есть контейнер div.Он имеет ширину 80%.

В контейнере div у меня есть div box-wrapper, который содержит четыре элемента div, все из которых float:left; Они таковы, что могут выпадать по одному за разв зависимости от размера браузера пользователя.

Под упаковщиком ящиков находится еще один div box-wrapper2, который содержит четыре невыпущенных элемента div.

Они появляются один над другим.

Проблема в том, что по какой-то причине div box-wrapper2 смещается вверх и позади упаковщика box.Я хочу, чтобы он располагался ниже верхней обертки.

Как мне это сделать?

Вот страница, о которой я говорю: http://www.rattletree.com/index2.php

Если вы используете firebug и hover над первым div "programDetail"Вы можете видеть, что он идет вверх и ниже указанного div.

Спасибо за любую помощь!

Answer 1

По этой ссылке вы найдете дополнительные варианты решения вашей проблемы: http://www.quirksmode.org/css/clearing.html

Вариант 1. Я полагаю, что вы можете установить свои контейнеры div на overflow:hidden;, что очистит их и ударит второй контейнер так, чтобы не было перекрытия.

Вариант 2. Вы должны установить div ниже ваших float, который очищает их. Есть несколько способов сделать это, но самый простой - установить еще один div под вашими числами с помощью css clear:both

Примечание: Не забудьте также дать своему очищающему div height:0;line-height:0;display:block;, чтобы убедиться, что оно не добавляет лишних пробелов в нижней части контейнера

---

EDIT: С тех пор как последний вопрос был задан (и получен ответ), изменились новые способы достижения желаемого эффекта. Обычной практикой является наличие контейнера div со следующими стилями:

.container:before, 
.container:after {
 display: table;
 line-height: 0;
 content: "";
}
.container:after {
 clear: both;
}

Этот метод используется популярными фреймворками (например, Zurb Foundation и Twitter Bootstrap)

Answer 2

Если я понимаю проблему, я считаю, что вы должны применять эти стили ...

.boxWrapper {
    border: 1px solid red;
    float: left;
    height: 100%;
    width: 100%;
}

.programDetailWrapper {
    border: 1px solid red;
    float: left;
    height: 100%;
}