Left, center, and right align divs on bottom of same line

Question

I have three divs that I would like to display on the same line. Each of the three has different widths and heights, and they are not straight text. I\'d like to left-align one

Answer 1

By setting your container div to position:relative and the child divs to position:absolute you can absolute position the divs within the confines of the container.

This makes it easy, as you can use bottom:0px to align all vertically to the bottom of the container, and then use left/right styling to position along the horizontal axis.

I set up a working jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ and the code follows:

HTML:

    
left
    
center
    
right
    

CSS:

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Note: For the "center" div, the margin-left = 1/2 the width of the div :)

Hope that helps :)