position a div at bottom css - html

Question

I am using HTML 5 and CSS 3.
Here is my html code:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style="float:left; width:100px;">Column 2</div>
<div style="float:left; width:100px;">Column 3</div>
I am trying to position the second and third div at bottom irrespective of the height of first div. Whatever may be the height of first div but the second and third div should be at bottom like following.
Test
Test
Test Test Test
I tried position absolute inside divs but not working. I need to achieve this using div not table. Any help would be appreciated. Thanks.

Answer 1

You don't need to use tables to take advantage of table-layouts:
You'll probably need to wrap the divs in another div to act like a table-row. These columns will grow so they are each as tall as the tallest:
html
<div class='table-row'>
<div>Column 1<br>with<br>more<br>text</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
css
.table-row{
display:table-row;
}
.table-row > div{
display:table-cell
;width:100px;
vertical-align:bottom;
}
demo here: http://jsfiddle.net/mhfaust/CV33q/
update
Acutally, you don't need the .table-row wrapper at all.
You could remove it in the above code, and change the selector from .table-row > div to jsust div and it will still work (though with other markup on the page that wouldn't be the best way to do it -- you'd want a classname on the div like .table-cell and use that selector instead.)

Answer 2

Working example http://jsfiddle.net/cYbW7/
<div style="background: yellow; float: left; display: block; position: relative;">
<div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div>
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div>
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div>
</div>

Answer 3

try setting bottom:0 to both div:
<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style=" bottom:0px; width:100px;">Column 2</div>
<div style=" bottom:0px; width:100px;">Column 3</div>
Here is demo
or if you just want to see in next line try this:
<div style="float:left; width:100px; height:100px;">Column 1</div>
<div style=" display:block; width:100px;">Column 2</div>
<div style=" display:block; width:100px;">Column 3</div>