Two divs aligned at the bottom

[minli98]

Hi,

I have this following problem: I have two divs that are side-by-side. The widths are pre-determined, but the heights are dynamic. I would like to make the two divs aligned at the bottom. Something like this:

********
*      *
* Div 1*
*      * ******
*      * *Div2*
******** ******

I was thinking that the easiest way would be to use table, but is there a css solution for this?

Many thanks,
Min

 

[Ghodmode]

div#div1 {
    position: absolute;
    width: 200px;
    bottom: 0;
    left: 0;
}

div#div2 {
    position: absolute;
    width: 100px;
    bottom: 0;
    left: 200px;
}

This should give you two divs along the bottom of your browser window. The second one should be adjacent to the first one.

Is this what you're looking for?

--
-- Ghodmode

 

[minli98]

Almost, but not quite. I don't want the two divs to be aligned to the bottom of the browser, but to the bottom of a containing div which may be placed anywhere. Should have made this clearer with my earlier post.

Min

 

[Foamcow]

Make sure you set a position (either relative or absolute) for the container and it should work.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[minli98]

Ok, it works now with the code below (1 modification from Ghodmode's version). Thanks you two.

div#container{
    position:relative;
    width:300px;
}

div#div1 {
    position: relative;
    width: 200px;
    bottom: 0;
    left: 0;
}

div#div2 {
    position: absolute;
    width: 100px;
    bottom: 0;
    left: 200px;
}