absolute positioning inside to relative parent overflows div when padding set - html

Question

Thats my codepen: http://codepen.io/helloworld/pen/JoKmQr
run on IE 11.
Why does the right red div Overflow into the Screen when I set the padding of 5% to the itemContainer?
<div style="background:lightblue;">Absolute position inside container</div>
<div id="itemContainer">
<div class="item i1">1</div>
<div class="item i2">2</div>
<div class="item i3">3</div>
</div>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, html {
padding: 0;
margin:0;
height:100%;
}
.item{
position:absolute;
}
#itemContainer{
background:orange;
height:100%;
position:relative;
padding:5%;
}
.item.i1 {
width: 50%;
height:50%;
background:lightgreen;
}
.item.i2 {
width: 50%;
height:50%;
top:50%;
background:lightgray;;
}
.item.i3 {
width: 50%;
height:100%;
left: 50%;
background:red;
}
UPDATE
My Goal is put 3 items on the Screen with a "2-column"-layout and the item of the 2nd "column" should simulate a "Rowspan" by giving it 100% height while item 1 and 2 have 50% height.

Answer 1

This is occurring because padding is counted as part of the height - If you were to put an 'inner' div to your #itemContainer and set the padding on the outer div, you'd be able to fix it. See my fork here: http://codepen.io/anon/pen/XJMMoZ

Answer 2

There is nothing wrong with the padding (when using box-sizing: border-box;).
The #itemContainer has position:relative.
The children divs (.item) have position:absolute.
To absolute position the children (.item), the browser needs to know relative to where (top,left,right and bottom).
In your example simply add these "positioning" properties to your absolute positioned divs:
.item{
position:absolute;
}
.item.i1 {
width: 50%;
height:50%;
background:lightgreen;
top:0;
left:0;
}
.item.i2 {
width: 50%;
height:50%;
top:50%;
background:lightgray;
bottom:0;
left:0;
}
.item.i3 {
width: 50%;
height:100%;
left: 50%;
background:red;
top:0;
right:0;
}
http://codepen.io/anon/pen/GgWVjY

Answer 3

Padding is counted as addition to width/height of the content elements without noticing its padding.
If you got 5% padding, you need to set the content to 90% width and height, because you already have 10% padding (5% top and 5% bottom respectively 5% left and 5% right.
For your 50% content blocks, you need to change it to 45%.
100% gets 90%.
This way it should fit.

Answer 4

I would suggest rewriting your code so it doesn't use absolutely positioned elements, especially for things like columns, or else you're going to keep running into issues like this. And having to reduce your width from 100% because of padding shouldn't be a requirement, especially when border-box would have prevented that need, but even then I still suggest something like this:
HTML:
<div class="container">
<div class="leftCol">
<div class="box1"></div>
<div class="box2"></div>
</div><!--
--><div class="rightCol">
</div>
</div>
CSS:
.container {
display: block;
width: 50%;
height: 500px;
padding: 25px;
background: #DDD;}
.leftCol,
.rightCol {
display: inline-block;
vertical-align: top;
height: 100%;
width: 50%;}
.leftCol {
background: #BBB;}
.rightCol {
background: #CCC;}
.box1 {
display: block;
width: 100%;
height: 50%;
background: gray;}
.box2 {
display: block;
width: 100%;
height: 50%;
background: #555;}