xHTML/CSS: How to make inner div get 100% width - margins

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

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner" sty开发者_JAVA技巧le="width:100%; border:1px; margin:4px">
    something inside ...
  </div>
</div>

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

P.S. All styles are in separate classes in my case, here I putted CSS into style attributes just for simplification.

Taking away the width on the inner div should work, width: auto; will work with margins, 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>

Here are some styles that work if you remove the ones directly on the elements. I used auto on the inner CSS and a margin-right = 8px. To make it easier to see I made the inner green and the outer black.

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

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