xHTML / CSS: как заставить внутренний div получить 100% ширину - поля

Question

У меня есть 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 превышает ширину внешнего на 8px (поля). Как сделать внутренний div, чтобы получить ширину внешнего div минус 8px поля?

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

Answer 1

Отбор ширины на внутреннем элементе 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>

Answer 2

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

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

    #inner
    {
        width: auto;
        border: 1px solid green;
        margin-right: 8px;
    }