HTML, проблема Nested Div

Question

На моей странице есть три раздела Верхний колонтитул, Тело и Нижний колонтитул. В теле у меня есть три деления. Первый div включает в себя еще два маленьких div.

Я написал этот код CSS:

#body_container{
    margin: 10px 160px;
    height: auto;
    width: 100%;
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    height: auto;
    width: 74%;
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    height: auto;
    width: 25%;
    float: right;
    border: 1px solid #F0F;
}

но когда я проверяю это, div выходит из моей рамки. Я дал 160px поля слева и справа. что я должен делать? Спасибо

Answer 1

Это просто, margin добавляет к окончательной визуализированной ширине элемента (это 160 x 2 + 100% ширины родительского элемента, так что это переполнение), так что вы можете захотеть сделать это, например, для внешнегоdiv, эта ширина составляет 79%, а левый и правый поля равны 10% каждый (итого всего 99%, на 1% меньше, чтобы оставить место для границ и т. д. ... хотя обычно это не так, как я это делаю)

пример: http://jsfiddle.net/MKjwU/6/

еще одна вещь: чтобы очистить поплавки, вы не очистите его, как в вашем примере ...

либо используйте дополнительный div, какэто: http://jsfiddle.net/MKjwU/7/

или используя эту технику: http://www.quirksmode.org/css/clearing.html

см. по адресу: http://jsfiddle.net/MKjwU/8/

Answer 2

Я ненавижу использовать проценты, так как они зависят от других вещей.

Обычно я делаю что-то со статическими значениями, например:

#body_container{
    margin: 10px auto; /** The auto will make this div centered to the page **/
    width: 1000px; /** suppose you want this width **/
    clear: both;
    border: 1px solid #3F0;
}

div.body_contents{
    width: 748px; /** The width of the main part, -2px (for the border) **/
    float: left;
    border: 1px solid #960;
}

div.sidebar{
    width: 248px; /** The width of the side bar, -2px (for the border) **/
    border: 1px solid #F0F;
}

Конечно, если вы хотите, чтобы ширина вашего основногоdiv, чтобы изменить размер браузера (как это было бы с вашим исходным CSS), мой ответ не работает.

Но я бы порекомендовал вам НЕ делать изменения ширины на основе браузератак как это изменит организацию вашей страницы в зависимости от окна.