place a div element always bottom

A while ago I have searched for a solution to place a <div> element inside another <div> element always bottom. There are many solutions to put the div bottom from the whole html site but rar solutions to put it in the container div bottom.

Now here comes my solution …

I have one div container (calling it simple container) with a height of 100% (this container itself is placed for example in another parent container which has a height of 400px). And I have my div which should placed bottom of the container:

<div id="container" style="height:100%; position:relative;">
  <div id="bottom_div" style="height:10%; position:absolute; bottom:0px;"/>
</div>

The trick is to give the container div a position relative and then you can use the position absolute in the bottom div element. If the container div has no position style atribute it will not work.

Werbung