Каков наилучший способ заполнить этот div?

Question

Я пытаюсь преобразовать мой сайт из макета таблицы в сНу макета, в то время как с сервировкой стола все было более intuaitive, я застреваю каждую минуту с этим макетом сНа, вот моя текущей проблема -

Я хочу текст в левом div, который будет дополняться слева и сверху. Если я положу левый DIV, весь div будет расширен (хотя контейнер div имеет определенную для него ширину 700 пикселей); Если я попытаюсь пометить текст сам по себе, он почему-то работает только для создания левого поля, но он не влияет на верхний край, который остается на 0px.

вот мой код:

<div id="container"> 
    <div id="left">I want some padding here 
     <div id="image">image</div> 
    </div> 
    <div id="middle"></div> 
    <div id="right"> 
     <div id="text">Text</div> 
    </div> 
    <br style="clear: left;" /> 
</div> 

CSS:

#container { 
border: 1px solid #DCD7D4; 
width: 700px; 
min-height: 680px; 
position: relative; 
margin-left: auto; 
margin-right: auto; 
} 
#left { 
float:left; 
width: 500px; 
min-height: 680px; 
background-color: #F6F1ED; 
} 
#left #image { 
position: absolute; 
left: 27px; 
bottom: 40px; 
background: green; 
width: 375px; 
height: 48px; 
} 
#right { 
float: left; 
width: 194px; 
min-height: 680px; 
background-color: #F2EEEF; 
} 
#right #text { 
position: absolute; 
left: 523px; 
top: 154px; 
background: yellow; 
width: 150px; 
height: 70px; 
} 
#middle { 
    float:left; 
    background: #0C9; 
background-image:url(midbg.png); 
    width: 6px; 
    min-height: 680px; 
} 

Answer 1

Вы можете добавить отступы к вашему #left DIV вместе с box-sizing: border-box и макет должен оставаться в такте

#left 
{ 
    padding: x px; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box 
} 

Answer 2

Читайте на модели CSS box здесь: http://css-tricks.com/the-css-box-model/

Заполнение будет влиять на характеристики вашего общего элемента.

Кроме того, это отличный трюк для борьбы с фанками обивкой различных элементов: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

Как насчет любого из этих решений. Они работают в моем браузере:

<div id="container"> 
    <div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span> 
     <div id="image">image</div> 
    </div> 
    <div id="middle"></div> 
    <div id="right"> 
     <div id="text">Text</div> 
    </div> 
    <br style="clear: left;" /> 
</div> 

ИЛИ

<div id="container"> 
    <div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div> 
     <div id="image">image</div> 
    </div> 
    <div id="middle"></div> 
    <div id="right"> 
     <div id="text">Text</div> 
    </div> 
    <br style="clear: left;" /> 
</div> 

Answer 4

если border-box не работает, то продолжительность должно работать для вас, проверить это demo

CSS

#left > span { 
    padding:100px; 
    position:absolute; 
    height:100%; 
    border:1px solid #000; 

} 

HTML

<div id="left"> 

    <span>I want some padding here</span> 
    <!-- rest of html --> 

`

EDIT

Поскольку ваш #left имеет ребенок divs внутри, вы не можете применить опцию дополнени к нему.

padding требуется на тексте непосредственно под #left Ид и не ребенок сНу, поэтому, span предлагается в качестве <span> является встроенным элементом и <div> является элементом уровня блока.