How can I position my div at the bottom of its container?

Answer 1

While none of the answers provided here seemed to apply or work in my particular case, I came across this article which provides this neat solution :

#container {
  display: table;
}

#copyright {
  display: table-footer-group;
}

I find it very useful for applying responsive design for mobile display without having to reorder all the html code of a website, setting body itself as a table.

Note that only the first table-footer-group or table-header-group will be rendered as such : if there are more than one, the others will be rendered as table-row-group.

Answer 2

If you do not know the height of child block:

#parent {
    background:green;
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:bottom;
}
.child {
    background:red;
    vertical-align:bottom;
}

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

http://jsbin.com/ULUXIFon/3/edit

If you know the height of the child block add the child block then add padding-top/margin-top:

#parent {
    background:green;
    width:200px;
    height:130px;
    padding-top:70px;
}
.child {
    background:red;
    vertical-align:
    bottom;
    height:130px;
}

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

Answer 3

Try this;

<div id="container">
  <div style="height: 100%; border:1px solid #ff0000;">
  <!-- Other elements here -->
  </div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
   Copyright Foo web designs
</div>

Answer 4

Also, if there's stipulations with using position:absolute; or position:relative;, you can always try padding parent div or putting a margin-top:x;. Not a very good method in most cases, but it may come in handy in some cases.

Answer 5

There is nothing called float:bottom in CSS. The best way is using positioning in such cases:

position:absolute;
bottom:0;

Answer 6

You can indeed align the box to the bottom without using position:absolute if you know the height of the #container using the text alignment feature of inline-block elements.

Here you can see it in action.

This is the code:

#container {
    /* So the #container most have a fixed height */
    height: 300px;
    line-height: 300px;
    background:Red;
}

#container > * {
    /* Restore Line height to Normal */
    line-height: 1.2em;
}

#copyright {
    display:inline-block;
    vertical-align:bottom;
    width:100%; /* Let it be a block */
    background:green;
}