Bar Graph Effect: Aligning Multiple DIVs to Bottom when Side by Side

Question

Here is an image of my problem: http://www.rhexi.com/images/uploads/example.jpg

I am trying to align multiple side-by-side divs to the bottom within a parent div. The end result I am trying to achieve is a bar graph, where you have a parent container, and multiple bar divs a the bottom within the parent.

I have successfully embedded the child bar divs within the container div, but they are all aligned top. How do i get it to align bottom?

I do not want to use position: absolute and bottom: 0 since these bars need to be floating.

Here is my code:

    <div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;">
            <div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left;"></div>
            <div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left;"></div>
            <div style="width: 20px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
    </div>

Thanks for the help!

Answer 1

If you want to continue using this technique, but need skybondsor's answer to be aligned with the bottom of the "screen" without using absolute positioning on each bar, just make use of your margin style. Your margin-top should be equal to:

margin-top = height_of_graph - height_of_bar

So, in the example set by skybondsor, this worked for me:

<div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;position:relative;">
    <div style="width: 199px; height: 50px; position: absolute; bottom: 0;">
        <div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left; margin-top: 30px;"></div>
        <div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left; margin-top: 40px;"></div>
        <div style="width: 20px; margin-top: 45px; height: 5px; background: #f00; margin-left: 1px; float: left;"></div>
    </div>
</div>

Hope this helps.