How do you make an absolute positioned element honor the padding of its parent? I want an inner div to stretch across the width of its parent and to be positioned at the bottom of that parent, basically a footer. But the child has to honor the padding of the parent and it's not doing that. The child is pressed right up against the edge of the parent.
So I want this:
but I'm getting this:
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
</div>
</body>
</html>
I can make it happen with a margin around the inner div, but I'd prefer not to have to add that.
This question is related to
css
padding
css-position
The answer is
add padding:inherit in your absolute position
.box{_x000D_
background: red;_x000D_
position: relative;_x000D_
padding: 30px;_x000D_
width:500px;_x000D_
height:200px;_x000D_
box-sizing: border-box;_x000D_
_x000D_
_x000D_
}<div class="box">_x000D_
_x000D_
<div style="position: absolute;left:0;top:0;padding: inherit">top left</div>_x000D_
<div style="position: absolute;right:0;top:0;padding: inherit">top right</div>_x000D_
<div style="text-align: center;padding: inherit">center</div>_x000D_
<div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>_x000D_
<div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>_x000D_
_x000D_
_x000D_
</div>Here is my best shot at it. I added another Div and made it red and changed you parent's height to 200px just to test it. The idea is the the child now becomes the grandchild and the parent becomes the grandparent. So the parent respects its parent. Hope you get my idea.
<html>
<body>
<div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
<div style="background-color: red; position: relative; height: 100%;">
<div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
</div>
</div>
</body>
</html>
Edit:
I think what you are trying to do can't be done. Absolute position means that you are going to give it co-ordinates it must honor. What if the parent has a padding of 5px. And you absolutely position the child at top: -5px; left: -5px. How is it suppose to honor the parent and you at the same time??
My solution
If you want it to honor the parent, don't absolutely position it then.
One thing you could try is using the following css:
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
It lets the child element inherit the padding from the parent, then the child can be positioned to match the parents widht and padding.
Also, I am using box-sizing: border-box; for the elements involved.
I have not tested this in all browsers, but it seems to be working in Chrome, Firefox and IE10.
Use margin instead of padding in the parent div: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
1.) you cannot use big border on parent -- in case you want to have a specific border
2.) you cannot add margin -- in case your parent is a part of some other container and you want your parent to take the full width of that grand parent.
The Only Solution that should be applicable is to wrap your children's in an another container so that your parent becomes the grandparent and then apply padding to the new children's Wrapper / Parent. Or you can directly apply padding to the children.
In your case:
.css-sux{
padding: 0px 10px 10px 10px;
}
I would set the child's width this way:
.child {position: absolute; width: calc(100% - padding);}
Padding, in the formula, is the sum of the left and right parent's padding. I admit it is probably not very elegant, but in my case, a div with the function of an overlay, it worked.
Could have easily done using an extra level of Div.
<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
<div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
<div style="background-color: gray;">css sux</div>
</div>
</div>
Well, this may not be the most elegant solution (semantically), but in some cases it'll work without any drawbacks: Instead of padding, use a transparent border on the parent element. The absolute positioned child elements will honor the border and it'll be rendered exactly the same (except you're using the border of the parent element for styling).
Source: Stackoverflow.com