tags:

views:

37

answers:

2

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?

+3  A: 

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?

Adam Kiss
I would like my div to fill the entire window, except for small left and right margins, regardless of the window size.
Matt Ball
All that needed to work was to add to the wrapper's CSS: `box-sizing: border-box` so that it would include the padding's width. And my inner div ("`#my-div`") needs the `width: 100%` property because it has `display: table` (which is needed for *its* children... don't ask). Thanks!
Matt Ball
:D I don't like `box-sizing` and `display: table` for their rather *f**cked up* support.
Adam Kiss
A: 

Adam answered the question. My only addition is that you should never need to set a <div/>'s width to 100%. You get that for free, and setting it only creates problems for you.

Robusto