How to get fluid box with absolute position while parent has a box-sizing of border-box?

Question

I have two divs 'parent' and 'child'. Both boxes has a box-sizing property with value of border-box. Parent has fixed width and padding while I need child fluid width and absolute position. Child should be inside the parent div but instead its behaving kind a weird and took parents full width including padding which pushes it outside the parent. My markup looks like:

<div class="parent">
   <div class="child"></div>
</div>

and CSS:

.parent{
    width: 500px;
    height: 500px;
    padding: 45px;
    box-sizing: border-box;
    background-color: red;
    position: relative;
}

.child{
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 10px;
    box-sizing: border-box;
    background-color: orange;
}

You can also see it at JSFiddle. Please suggest!

Jsalinas Jsalinas · Accepted Answer · 2013-11-24T13:08:22

You need to add a left: 0 to your child element to keep it aligned with the parent element. Check here.

How to get fluid box with absolute position while parent has a box-sizing of border-box?

1 Answers