Почему div и таблица ведут себя по-разному, если ширина здесь равна 100%? - PullRequest
Новая
       15

Почему div и таблица ведут себя по-разному, если ширина здесь равна 100%?

2 голосов
/ 25 января 2011

Вот мой код, приведенный к соответствующим частям: 

<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }

#bodyWrapper{ float: left; width: 100%; }

#bodyColumn{ margin-left: 230px; height:500px; }

#menuColumn{
    float: left;
    width: 230px;
    border: solid 1px black;
    margin-left: -100%;
    height:500px;
}

.bigContent{ width: 100%; margin:10px; }

.section{
    border: 1px solid black;
    padding:10px;
    overflow: auto;
}
</style></head><body>

<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">

<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>

</div></div>
<div id="menuColumn">MENU</div>
</body></html>

Моя проблема:

  • <div>, содержащий "ВТОРОЙ", шире, чем <table>, содержащий«ПЕРВЫЙ», хотя оба являются братьями и сестрами и имеют width=100% через тот же класс CSS
  • <div> также шире экрана, в результате чего появляются полосы прокрутки

Почемуи что я могу сделать, чтобы это исправить?

Примечание: я вижу одинаковые проблемы в Firefox 3.6 и IE 8

1 Ответ

8 голосов
/ 25 января 2011

Это из-за padding.В CSS свойство width применяется к блоку содержимого элементов без отступов.

См. http://www.w3.org/TR/CSS21/box.html: свойство width применяется к блоку Content в следующей схеме:

...