zahi daoui zahi daoui - 5 months ago 38
HTML Question

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

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

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;
}
Comments