title: CSS bar graph - very simple
body: <p>I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".</p>
  
  <pre><code>      &lt;div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;"&gt;
          &lt;div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"&gt;&lt;/div&gt;
          &lt;div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"&gt;&lt;/div&gt;
          &lt;div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"&gt;&lt;/div&gt;
          &lt;div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"&gt;&lt;/div&gt;
          &lt;div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I don't want to use a library or JS add on. Keeping this light weight is mission critical.</p>
  
  <p>Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,</p>