CODEWITHSUNDEEP
htmlcss
epeleg
epeleg

Reputation: 10945

div with margins & padding that needs to fill its parent

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...

Upvotes: 12

Views: 28169

Answers (4)

dusty
dusty

Reputation: 51

Set all elements to have box-sizing as border-box in your stylesheet.

This will sum up the padding of all elements so you don't have to worry about any disruptions if you add any padding.

*{
   box-sizing: border-box;
}

Upvotes: 5

Dennis Traub
Dennis Traub

Reputation: 51654

You can set the padding of the outer div. Then the inner div will only occupy what's left.

Have a look at this: (try yourself at jsFiddle)

.outer {
 width: 200px;
 height: 200px;
 background-color: #DD0000;
 padding: 5px;
 box-sizing: border-box;
}
.inner {
 width: 100%;
 height: 100%;   
 background-color: #0000DD;
}

<div class="outer">
    <div class="inner"></div>
</div>

really these two ways of doing this is equivalent as far as the question is concerned. It is important to remember the redundancy generated by how html and css standards are setup.

Upvotes: -1

Yoshi
Yoshi

Reputation: 54659

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/

Upvotes: 10

giker
giker

Reputation: 4245

Something like this: http://jsfiddle.net/Rnf82/ ?

Upvotes: 1

Related Questions