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

Question

I have 2 nested divs and outer one has 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 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.

Answer 1

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>

Answer 2

There are two ways to do this:

The most obvious is to use absolute pixel dimensions, which I personally recommend because they are more predictable and less subject to cross-browser problems.

I think the answer your looking for however is this:

<div id="inner" style="width:94%; border:1px; margin:2%">

Technically speaking, that's hack-ish but the issue is that without seeing the layout or more info that's the best advice I can give.

Answer 3

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