How to force position absolute with 100% width to fit into parent div with padding?

Question

I have 2 divs, an outer div which is a parent and a child div. The outer div is position relatives with padding 20px for left and right while the child is position absolute with 100% widthg. How can I force the child which is position absolute to be within the parent, ie respecting the padding 20px (inside parent and within the 20px padding)

I've done the example here: http://www.bootply.com/nyGZzTVY8v

I've read about box-sizing but I still don't understand how to implement it correctly. Tried putting it on the box1 class and nothing happen, tried putting on the box2 class and nothing happen also.

thanks in advance.

Additional Note: It has to be responsive ie I do not know the size of the parent div thus the 100% for the child div.

Answer 1

Just set left: 20px; and right: 20px; and remove width: 100%

Live Demo

.box2 {
    position: absolute;
    padding: 50px 0;
    color: #000;
    background: #fff;
    left: 20px;
    right: 20px;
    border: solid thin #06F;
}

or add left: 20px; and the calc function width: calc( 100% - 40px )

.box2 {
position: absolute;
width: calc( 100% - 40px );
padding: 50px 0;
color: #000;
background: #fff;
left: 20px;
border: solid thin #06F;
}

live Demo