CSS Div : Align Everything inisde if div to bottom

i am开发者_如何学编程 trying to bulid this graph... heres the problem

TAKE A LOOK AT THIS.. i want these divs "#green" to be aligned to the bottom

How is this?

I changed your float: left to display: inline-block which by default has a vertical-align: baseline I believe.

Check out how to do one for IE6 and IE7.

Also, as a sidenote, you should assign one id attribute to one element. Use a class otherwise.

here you go: http://jsfiddle.net/SebastianPataneMasuelli/uYghh/16/

change the left value to move them around.

edit: updated sample for correct margins.

please change the id property of the green divs to some thing different to each other
http://jsfiddle.net/uYghh/33/

Remove float:left; use display:inline-block;

Change your css by this

#green
{
    position: relative;
    float : left;
    width  : 20px;
    top:100%;
    margin : 5px;
    border: solid 1px #0fb551;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#0fb551), to(#064d23));
    background: -moz-linear-gradient(#0fb551, #064d23);
    background: linear-gradient(#0fb551, #064d23);   
    -pie-background: linear-gradient(#0fb551, #064d23);
    behavior: url(pie.htc);    
}

Add some jQuery to your project

$(function(){
    $('#graph div').each(function(){
        var ht=$(this).height();
        $(this).css({'margin-top':-ht-4+'px'});

    });
});