How to make an absolute position with a width of 100% inserted into the parent div with padding?

Question

I have 2 divs, an outer div, which is the parent and child div. The outer div is family members with an indent of 20px for left and right, while the child is an absolute position with 100% width. How can I make a child who is in an absolute position be inside a parent, i.e. Respect 20px registration (inside the parent and in addition to 20px)

I made an example here: http://www.bootply.com/nyGZzTVY8v

I read about the size field, but I still don't understand how to implement it correctly. I tried to put it in the box1 class, and nothing happened, tried to put on the box2 class and nothing happened.

early.

Additional note: it must be responsive, i.e. I do not know the size of the parent div, so 100% for the child div.

Answer 1

If it should be responsive, you can add indentation as a field, 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; } 

Answer 2

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

Answer 3

Once you use the absolute position, the div will not be in your parent div.instead, you can use position relative with and give it width:inherit , this will inherit the width of the parent div

Answer 4

It works great, try it. The parent div must have a relative position, and the child div can have an absolute position as you want.

 .box1 { width: 50%; margin: 10px; position:relative; } .box2 { display: block; position: absolute; width: 100%; }