title: Bar Graph Effect: Aligning Multiple DIVs to Bottom when Side by Side
body: <p>Here is an image of my problem:
  <a href="http://www.rhexi.com/images/uploads/example.jpg" rel="noreferrer">http://www.rhexi.com/images/uploads/example.jpg</a></p>
  
  <p>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 <strong>bar graph</strong>, where you have a parent container, and multiple bar divs a the bottom within the parent.</p>
  
  <p>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?</p>
  
  <p>I do not want to use position: absolute and bottom: 0 since these bars need to be floating.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    &lt;div style="width: 100px; height: 50px; padding-bottom: 1px; border: 1px solid #000;"&gt;
              &lt;div style="width: 20px; height: 20px; background: #000; margin-left: 1px; float: left;"&gt;&lt;/div&gt;
              &lt;div style="width: 20px; height: 10px; background: #00f; margin-left: 1px; float: left;"&gt;&lt;/div&gt;
              &lt;div style="width: 20px; height: 5px; background: #f00; margin-left: 1px; float: left;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for the help!</p>