Absoloute position div to bottom of relative parent

Question

I'm trying to place 'blue' at the bottom of the parent container 'green'. I've tried following this answer, but can't get it to work. I want the blue div to be at the bottom of the green div.

#green {
 position:relative;
 width:auto;
 height:200px;
 background-color:green;
}  



#blue {
 position:absoloute;
 bottom:0;
 height:75px;
 width:auto;
 background-color:blue;
}

<div id="green">
 <div id="blue"></div>
</div>

Thanks.

Thanks! I fixed the typo and set the width to 100% and it works. — j.beam, Sep 26 '15 at 02:11

score 3 · Accepted Answer · answered Sep 26 '15 at 02:08

1- You need to change position absoloute to absolute of #blue, then after width auto to width 100%.

#blue {
    position: absolute;
    bottom: 0;
    height: 75px;
    width: 100%;
    background-color: blue;
}

Here is an working example for you http://codepen.io/saorabhkr/pen/BoQjvN

Absoloute position div to bottom of relative parent

1 Answers1