two DIV side by side and aligned vertically at their bottom

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