How can I make a child div the width of the parent div when the child has position:absolute and some padding?
Here’s the example. I want the child to not extend past the parent.
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
How can I make a child div the width of the parent div when the child has position:absolute and some padding?
Here’s the example. I want the child to not extend past the parent.
http://jsfiddle.net/usv9R/1/
If you manually set top/left/right/bottom, without setting the width explicitly, it will expand to the parent. I’ve set this to
12pxfor all which gives the padding effectNote the
position:relative;on the parent, otherwise the child will be absolute to the parent’s parent and so on.This has one unfortunately consequences. One, which you may already be aware of, the parent won’t expand to fit the child.
Also, it just occurred to me that you maybe wanted the padding on the child instead? You can do that just fine, but be forewarned that given the above limitation, the parent won’t necessarily encompass the child with too much vertical padding.