Остановить переполнение CSS-плавающих объектов

Question

У меня есть здесь код в Dabblet: http://dabblet.com/gist/5705036

Я хотел, чтобы эти сегменты придерживались своей позиции, даже если размер браузера изменен без использования абсолютного позиционирования. Как, например, контейнер основного содержимого разрывает новую строку при изменении размера браузера [я использую плавающие элементы CSS в большинстве моих контейнеров].

Что-то не так с моим кодированием?

Подходит ли поплавки для макетов? или мне нужно использовать что-нибудь еще?..

Я просто не могу исправить это самостоятельно, и, проведя много исследований, все же, у меня нет хорошей идеи использовать это как способ исправить это. [Также я использую теги HTML5, такие как: раздел, статья, навигация и т. Д. ]

Answer 1

Просто удалите float:left; от maincontentid и применить display:table-cell;, Ваша проблема будет решена.

Вот код

#maincontent {
    border: 1px solid #BBBBBB;
    border-radius: 5px 5px 5px 5px;
    display: table-cell;
    margin-top: 15px;
    min-height: 400px;
    padding: 2px 6px;
    width: 700px;
}

Надеюсь это поможет.

Answer 2

Прежде всего, вы должны всегда очищать родительский элемент, если используете родительский элемент с плавающей точкой. Ваш правый элемент не работает, потому что у вас нет минимальной ширины контейнера, это пример кода:

#contentWrapper {
    width: 1000px;
    overflow: hidden; /*scroll / auto it's depends on You */
}

Answer 3

Я заметил, что в вашем коде у вас есть пробел в <div id="contentWrapper "> который остановил ваш CSS для этого элемента от появления. Кроме того, вам потребовалось еще 2 пикселя ширины на вашем #contentWrapper.

#contentWrapper {
    width: 992px;
}

Удаление места и изменение ширины #contentWrapper работало для меня. Я быстро взглянул на математику, но не понял, почему она должна быть 992px. Кто-нибудь?

Итак, отвечая на ваш вопрос, я бы сказал, что с плавающей точкой все в порядке, а у вас хороший подход, были только эти две незначительные ошибки.