xHTML/CSS: как сделать так, чтобы внутренний div получил ширину 100% — поля

У меня есть 2 вложенных div, а внешний имеет ширину: 100%

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner" style="width:100%; border:1px; margin:4px">
    something inside ...
  </div>
</div>

Но в этом случае внутренний div превышает ширину внешнего на 8 пикселей (поля). Как сделать внутренний div, чтобы получить ширину внешнего div минус 8 пикселей?

P.S. В моем случае все стили находятся в отдельных классах, здесь я для упрощения поместил CSS в атрибуты стилей.


html css xhtml
person Artem    schedule 04.02.2010    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Уменьшение ширины внутреннего div должно работать, width: auto; будет работать с полями и расширяться до максимальной горизонтальной области:

<div id="#outer" style="width:100%; border: solid 1px red;">
  <div id="#inner" style="border:solid 1px green; margin:4px">
    something inside ...
  </div>
</div>
person Nick Craver    schedule 04.02.2010

arrow_upward
0
arrow_downward

Вот некоторые стили, которые работают, если вы удалите их непосредственно из элементов. Я использовал auto во внутреннем CSS и margin-right = 8px. Чтобы было легче видеть, я сделал внутреннюю часть зеленой, а внешнюю — черной.

 #outer
    {
        width: 100%;
        border: 1px solid black;
    }

    #inner
    {
        width: auto;
        border: 1px solid green;
        margin-right: 8px;
    }
person Jason Rowe    schedule 04.02.2010