Vertical position of div element

Question

I have this so far: [![enter image description here][1]][1]

https://iamsteve.me/uploads/blog/inline-block-example.png

Problem here is that I don't know how to change vertical postion of this div elements. I'm allowed to use CSS1 and CSS2 for old browsers.

HTML

<div id="graph">
    <div style="height: 100px;" class="row"></div>
    <div style="height: 200px;" class="row"></div>
    <div style="height: 100px;" class="row"></div>
    <div style="height: 250px;" class="row"></div>
    <div style="height: 300px;" class="row"></div>

    <div id="legend">
      <div class="text">10</div>
      <div class="text">20</div>
      <div class="text">30</div>
      <div class="text">40</div>
      <div class="text">50</div>
    </div>
  </div>

CSS

.text {
    background-color: gray;
    width: 18%; 
    float: left;
    margin: 1%; 
    text-align: center;
}

.row {
    background-color: gray;
    width: 18%; 
    float: left;
    margin: 1%;
}

I updated my answer with some reasoning behind why I don't use float for this - hope it is useful. — Zze, Mar 28 '17 at 23:47

score 3 · Accepted Answer · edited May 23 '17 at 12:17

I like to use: display: inline-block instead of floating the elements.

Note that I set font-size: 0 in #graph to eliminate the spacing between inline-block as seen here.

#graph{
  font-size: 0;
}
.text {
  background-color: gray;
  width: 18%;
  float: left;
  margin: 1%;
  text-align: center;
  font-size: 10px;
}

.row {
  position: relative;
  bottom: 0;
  display: inline-block;
  background-color: gray;
  width: 18%;
  margin: 1%;

}

<div id="graph">
  <div style="height: 100px;" class="row"></div>
  <div style="height: 200px;" class="row"></div>
  <div style="height: 100px;" class="row"></div>
  <div style="height: 250px;" class="row"></div>
  <div style="height: 300px;" class="row"></div>

  <div id="legend">
    <div class="text">10</div>
    <div class="text">20</div>
    <div class="text">30</div>
    <div class="text">40</div>
    <div class="text">50</div>
  </div>
</div>

In regards to using float the specification states for both float left and right:

Left: The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.

I do not believe there is a way to override this (unfortunately).

Vertical position of div element

1 Answers1