Question

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 🙂

Answer 1

Add

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

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