align two divs, one at top one at bottom of a third div

Question

I have this code:

<div id="container">
    <div id="1"> div 1</div>
    <div id="2"> div 2</div>
</div>

I want to put div 1 at the top, and div 2 at the bottom of container, no matter how much the height of container is . How can I do so?

Answer 1

Such results can be achieve using flex properties. No matter how high the height of the container, the two divs will always be one at top & another at bottom.

#container {
    display: flex;
    justify-content:space-between;
    flex-direction:column;
    background-color: lightgrey;
}

#id{
    background-color: cornflowerblue;
    width: 100px;
    margin: 10px;
}

Answer 2

Set container's position to relative, and the position of div's 1 and 2 to absolute. Then set div 1 to top:0 and div 2 to bottom 0 (also avoid using number only ID's for CSS compatibility):

jsFiddle example

#container {
    position:relative;
    height:100px;
    width:100px;
    border:1px solid #999;
}
#div1, #div2 {
    position:absolute;
}
#div1 {
    top:0
}
#div2 {
    bottom:0;
}