Question

I have a div whose width is 100%. I know I can use box-sizing (or -moz-box-sizing) set to border-box to get that div‘s total width, including borders and padding (but not margin) to be that computed 100%. Is there a way to include the margin in that relative size computation as well?

Alternately, it would be great if there was a non-Javascript way to specify a combination of relative and absolute dimensions in a width, e.g.:

#my-div {
    width: 100% - 10px;
}

Can either of these be done?

Answer 1

It would help to know what’s your point, but knowing this all – I advice you to use wrapper div having width and padding or just having width and my-div having margin:

<div id="wrapper">
  <div id="my-div">
    content
  </div>
</div>

css:

#wrapper { width: 450px; padding: 25px; } /* i.e. relative 100% = 450px now */
  #my-div { margin: 20px; } /* there. now we have 100% - 40px width :] */

Something like that?