Проблема с укладкой divs рядом друг с другом

Question

У меня возникают проблемы с выравниванием 3 divs друг от друга.

http://jsfiddle.net/Lpprn/

У меня есть сильное чувство, что это в синтаксисе, но я не могу за жизнь мне понять это.

#story-container { 
    width: 700px; 
    padding: 0px; 
    margin: 0 auto; 
} 
#story-left { 
    width: 300px; 
    padding: 10px; 
    padding-right: 0px; 
    float: left; 
    text-align: right; 
    margin: 0; 
    background-color: #000000; 
} 
#story-center { 
    width: 100px; 
    float: left; 
    margin: 0; 
    background-color: #ffffff;  
} 
#story-right { 
    width: 300px; 
    padding: 10px; 
    padding-left: 0px; 
    float: left; 
    text-align: left; 
    margin: 0; 
    background-color: #808080; 

} 

Благодарим за помощь!

Answer 1

Содержащиеся элементы не содержат ширину родителя, 700px.

Это потому, что добавление дополнений к ширине дочерних элементов.

Поэтому 300px + 10px + 100px + 10px + 300px! = 700px

Вы должны либо вычесть значения отступов от ширины, или использовать что-то вроде box-sizing, который изменяет блочную модель элемента, в результате чего его свойства padding/border рассчитываются в его width/height.

Свойство CSS с использованием размера окна используется для изменения модели CSS по умолчанию, используемой для расчета ширины и высоты элементов. Это свойство можно использовать для эмуляции поведения браузеров, которые неправильно поддерживают спецификацию спецификации блока CSS.

border-box: Свойства ширины и высоты включают прокладку и границу, но не границу.

От MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Я добавил следующее к каждому элементу, хотя он на самом деле не будет необходимости на средний элемент, #story-center, так как он в настоящее время не имеет каких-либо отступов.

jsFiddle example - это теперь работает _{- (красный фон добавлен, чтобы отобразить родительский контейнер)}

box-sizing: border-box; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;