CSS Раскладка флюида с сохранением края поля или отступов вызывает переполнение

Question

У меня есть jsfiddle, где внешний оберточный div имеет ширину 100%. Я хочу создать внутренний div (tb_margin или tb_padding), содержимое которого должно начинаться с 40px слева. Я попробовал оба поля и отступы, чтобы создать этот промежуток времени в 40 пикселей, но в обоих случаях фактический div растягивается с правой стороны из-за ширины 100%.

Я хочу, чтобы вкладки содержались в div (tb_margin или tb_padding), который смещен на 40 пикселей слева, но должен растягиваться до полной ширины до правой границы.

Я не хочу переполнять: скрытый в (tb_margin или tb_padding), потому что при этом вкладки будут скрыты, если слишком много вкладок. В идеале вкладки должны переноситься на следующую строку, содержащуюся (tb_margin или tb_padding).

<h1>hello</h1> 
<div style="width:100%;height:100px;border: 1px solid red"> 
    <div style="width:100%;height:50%; border: 1px solid blue"> 
     <div style="height:100%;width:150px;float:left; border:1px solid yellow"> logo</div> 
     <div style="float:right;border:1px solid green;"> User| 13-Nov-13| Logout </div> 
    </div> 
    <div id="tb_margin" style="width:100%;margin-left:40px;border:1px solid green">tabbbs with margin here </div> 
    <div id="tb_padding" style="width:100%;padding-left:40px;border:1px solid grey">tabbbs with padding here </div> 
</div> 

Я действительно хотел CSS макет коробки был более интуитивным, или я что-то отсутствует

Answer 1

Самый простой способ для того, что вы пытаетесь достичь, это просто не указывать width: 100% на маржинальной или ватных дивы. По умолчанию все divs отображаются как block, что означает, что они растянутся, чтобы заполнить оставшееся горизонтальное пространство.

Проблема с фактическим указанием width: 100%, как вы выяснили, заключается в том, что горизонтальное заполнение и край добавляются поверх вычисления ширины - если вы оставите ширину как не указанную, браузер автоматически выполнит требуемую ширину чтобы заполнить пробел, который не может быть 100% его родителя.

В будущем лучше всего применять width: 100%, когда вам это действительно нужно (например, при использовании поплавков) и избегать указания размеров, если вы можете с ним справиться.

<h1>hello</h1> 
<div style="width:100%;height:100px;border: 1px solid red"> 
    <div style="width:100%;height:50%; border: 1px solid blue"> 
    <div style="height:100%;width:150px;float:left; border:1px solid yellow"> 
     logo 
    </div> 
    <div style="float:right;border:1px solid green;"> 
     User| 13-Nov-13| Logout 
    </div> 
    </div> 
    <div id="tb_margin" style="margin-left:40px;border:1px solid green"> 
    tabbbs with margin here 
    </div> 
    <div id="tb_padding" style="padding-left:40px;border:1px solid grey"> 
    tabbbs with padding here 
    </div> 
</div> 

Answer 2

box-sizing на помощь!

#tb_padding { 
    width:100%; 
    padding-left:40px; 
    border:1px solid grey; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Вот демо: http://jsfiddle.net/pavloschris/nepC3/25/ и некоторые данные: https://developer.mozilla.org/en-US/docs/CSS/box-sizing