How to force position absolute with 100% width to fit into parent div with padding?
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
If it has to be responsive, you could add the the padding as a margin and then use calc for the width:
.box2 {
position: absolute;
width: calc(100% - 40px);
left: 0px;
padding: 50px 0;
margin: 0 20px;
colour: #000;
background: #fff;
border: solid thin #06F;
}