Vertical-align with non-full height children of div

I'm making a website and I have this HTML for a bar chart:

<div class="chart">
  <meter style="height: 160px;">80%</meter>
  <meter style="height: 86px;">43%</meter>
  <meter style="height: 128px;">64%</meter>
  <meter style="height: 172px;">86%</meter>
  <meter style="height: 70px;">35%</meter>
  <meter style="height: 52px;">26%</meter>
</div>

To make this into a nice bar chart, I use this CSS:

div.chart {
  background-color: #343434;
  height: 200px;
  padding: 10px;
}

div.chart meter {
  display: inline-block;
  background-color: #892399;
  border-top: solid 1px #AB34CB;
  color: #FFFFFF;
  outline: solid 1px #670034;
  text-align: center;
  width: 60px;
  vertical-align: text-bottom;
}

Because none of the bars in the chart is 100%, and thus 200px, there is a gap between the bottom of the chart container and the bars:

The only way to fix this I could think of is either by using开发者_开发技巧 JavaScript, or by inserting some aweful div after the bars that has a width of 1px and visibility: hidden; set, but this screws up my HTML.

How can I fix this in another way while retaining my HTML as is?

By the way, this web app won't be used by any IE users so I don't care about that ancient piece of %&@# either :)

Add

div.chart {
  display:table-cell;
  vertical-align:bottom;
  }

See the live example: http://jsfiddle.net/Flack/sB2zU/

If div.chart must always be 200px, then set another div inside it without a specified height, and put the <meter>s inside that one. Set this new inner div to position:absolute;bottom:0; Set the background color on the outer div, not the inner one.

Like:

#outer { position: relative;
    background: purple;
    height: 200px; }
.chart { position: absolute;
    bottom: 0; 
    background: transparent; /* not necessary, just to show you. */
    }


<div id="outer">
<div class="chart">
  <meter style="height: 160px;">80%</meter>
  <meter style="height: 86px;">43%</meter>
  <meter style="height: 128px;">64%</meter>
  <meter style="height: 172px;">86%</meter>
  <meter style="height: 70px;">35%</meter>
  <meter style="height: 52px;">26%</meter>
</div>
</div>