Question

I need two DIV to be put side by side and aligned vertically at their bottom.

• The orange div doesn’t have a width or height. It can grow depending of his content
• I should be able to use padding and margin of the green div
• I would like to have a solution that doesn’t use javascript

Answer 1

See: http://jsfiddle.net/thirtydot/J9eds/

I’ve used display: inline-block combined with vertical-align: bottom.

HTML:

<div id="container">
    <div id="left">
        left<br />left<br />left<br />left<br />left<br />left<br />
        leftleftleftleftleftleft
    </div>
    <div id="right"></div>
</div>

CSS:

#container {
    border: 1px solid red;
    float: left;
}
#left, #right {
    border: 2px solid red;
    background: #ccc;

    vertical-align: bottom;
    display: inline-block;
    /* ie6/7 */
    *display: inline;
    zoom: 1;
}
#right {
    margin: 20px 20px 0 20px;
    padding: 20px;
    width: 100px;
}