XHTML / CSS: How to make the inner div get 100% width - fields

Question

I have 2 nested divs and the outer one has a width: 100%

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

But in this case, the inner div exceeds the width of the outer by 8px (margins). How to make an inner div to get the width of the outer div minus 8px margin?

PS All styles in a separate class in my case, here I put CSS in the style attributes just for simplicity.

Answer 1

Removing the width on the inner div should work, width: auto;will work with the fields and expand to the maximum horizontal area:

<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;
    }