CODEWITHSUNDEEP
htmlcss
j.beam
j.beam

Reputation: 35

Absoloute position div to bottom of relative parent

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.

Upvotes: 0

Views: 83

Answers (1)

Soarabh
Soarabh

Reputation: 2950

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

Upvotes: 3

Related Questions