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>