CSS плавает и отступы

Question

У меня довольно обычный блог Wordpress, есть основной раздел (статическая ширина, с плавающей точкой слева) и раздел меню (кроме, но используется, например, div, также статическая ширина, с плавающей точкой слева).

Дело в CSSне "считает" отступы как "ширину", поэтому div в 100% ширины в моем "главном разделе" выглядит нормально, но даже отступ в 1 пиксель разрушает весь макет.

Странная вещь, когда яне устанавливая ширину вообще - все работает отлично, что странно для меня, потому что я всегда думал, что div всегда стремятся занять как можно большую площадь (так что ширина: 100% совсем не равна ширине вообще, даже если во втором случаеdiv занимает ... 100%? что за ..?:)).

У меня также есть несколько элементов inline-block, и это еще хуже, потому что они никогда не подходят под макет:

http://jsfiddle.net/GCFjh/

Я знаю, как работают поплавки и отступы, но есть ли способ исправить мою проблему?И я имею в виду реальное исправление, я хочу, чтобы мои div занимали 100% основного родительского div, не касаясь меню.И я не ищу читы (например, скрытые переполнения) и т. Д., Потому что в реальном мире у моего основного div также есть отступы:)

Answer 1

Это просто, поместите его внутрь другого и примените отступ к внутреннему элементу div, ширину к внешнему:

<div id='outer' style='width:100%;float:left;'>
   <div id='inner' style='padding:10px;'>
   ...
   </div>
</div>

Answer 2

Попробуйте это:

<div style="width: 100%">
    <div class="container">
    Container with paddings
    </div>
</div>

в основном, оберните тег div с отступом внутри вашего div с шириной = 100

Answer 3

Самым простым способом является использование свойства box-sizing: border-box .

. Это работает во всех современных браузерах и IE8 + (не IE7!) .

Если вам небезразлична поддержка IE7, решения становятся безобразными.

Live Demo

#main div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}