Align vertical lists in html

Question

Hello I am making a bar graph using only php and html. The graph must show the score for each team . This is my code:

<?php 

    $teams = get_teams();
?>

    <div id = "graph">
        <table>
            <tr>
    <?php
    foreach($teams as $team)

    {
        $name = $team['name'];
        $score= $team['score'];
        $height = $team['height'];

        <td>
            <ul id = "graph-list">
                <li class = "graph">
                    <img = src="<?php echo url_for('images/bar.png');?>" height ="<?php echo $height?>" width = "18" alt = ""/><br /><?php echo $score;?></li>
                <li class = "graph" id = "s"> <?php echo $name; ?></li>
            </ul>
        <td>

<?php }?>

And the stylesheet I am using is:

li.graph{
    display: inline-block;
    float: bottom;
    text-align: bottom;
    list-style:none outside none;
    margin-right: 12px;
    font-size: 12px;

}

li#s{
    margin: -9px;
    -moz-transform-rotate: rotate(90deg);
    -webkit-transform: rotate(90deg);
    margin-top: 20px;
    font-size: 12px;
}

div#graph{
    width: 400px;
    margin: auto;
}

ul#graphlist {

  list-style: none;
  float: bottom;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  padding-right: 100px;
}

However my graph is like:

What can I do so that the bars all start at the same y axis value and they don't kind of irregularly float like in my picture?

Answer 1

I quickly knocked this up to give you an idea of how you could go about it using flexbox.

https://codepen.io/1amShaw/pen/OJJGzMo

I think you could possible change your Markup, so each score has it's own list item:

<ul class="graph-list">
  <li>
      <div class="graph-block">
        <div class="graph-block__bar" style="height: 100%"></div>
        <div class="graph-block__score">1800</div>
        <div class="graph-block__name"><span>Mr Smith</span></div>
      </div>
   </li>
  <li>
      <div class="graph-block">
        <div class="graph-block__bar" style="height: 50%"></div>
        <div class="graph-block__score">900</div>
        <div class="graph-block__name"><span>Mrs Jones</span></div>
      </div>
  </li>
  <li>
      <div class="graph-block">
        <div class="graph-block__bar" style="height: 10%"></div>
        <div class="graph-block__score">100</div>
        <div class="graph-block__name"><span>Mr Bloggs</span></div>
      </div>
  </li>
  <li>
      <div class="graph-block">
        <div class="graph-block__bar" style="height: 37%"></div>
        <div class="graph-block__score">370</div>
        <div class="graph-block__name"><span>Mr Mcallister</span></div>
      </div>
  </li>
</ul>

Then as far as the CSS goes, you can use flexbox to achieve your goal.

.graph-list {
  background-color: #DDD;
  display: flex;
  height: 300px;
  list-style: none;
  margin: 0;
  padding: 20px 20px 140px;
}

.graph-list li {
  display: flex;
  margin: 0 20px;
}

.graph-block {
  display: flex;
  flex-direction: column;
  position: relative;
}

.graph-block__bar {
  background-color: blue;
  margin: auto auto 0;
  width: 40px;
}

.graph-block__score {
  font-weight: bold;
  padding: 5px 0;
  text-align: center;
}

.graph-block__name {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  transform: rotate(90deg) translateX(30px) translateY(-50%);
  transform-origin: left top;
  white-space: nowrap;
}

You could also maybe use CSS gradients to create the bar, rather than an image, just in case you want to maybe animate it or something at some point?