Question

I have a container div (it has both width an height set in pixels).

Is there a way to add a child div that will fill its entire parent but still have margin and or padding ?

suppose the parent div is 200px wide, and 200px high.

if I give the child div a width/height of 100% then it assumes that I mean for the content are to be of size 200px and then if I add padding or margins the size of the child becomes bigger then that of the parent.

I want the child div’s content area to be what ever is left after taking out 5px margins on each side…

and please don’t tell me to subtract 2*5px from 200px – I know that but I am looking for a better solution.

could it be that css can’t handle such a simple task…

Answer 1

You could try the following:

#outer {
  width: 200px;
  height: 200px;
  background: blue;
  position: relative;
}

.inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
}

demo: http://jsfiddle.net/wYNYh/1/