Stop floating DIVs from overlapping

Question

I am developing a pure CSS diagram type of graph. Here is a trimmed down version of it: jsfiddle.

As you can see, some of the floating divs are overlapping each other. If you increase the height of the list items, it works fine: jsfiddle.

The problem is that I want to keep the height small, how can I do this without the divs overlapping the way they are?

HTML:

<div id="ratio">
             <div id="ratio_mid">
                <ul id="ratio_graph"><li class="ratio_val c50">X Comments</li><li class="c41"> </li><li class="c32"> </li><li class="c23"> </li><li class="c14"> </li><li class="c5"> </li><li class="c-4"> </li><li class="c-13"> </li><li class="c-22"> </li><li class="c-31"> </li><li class="ratio_val c-40">X Notes</li>      </ul>
             </div>
          </div>

CSS:

#ratio {
    float: left;
    width: 100%;
}
#ratio_mid {
    float: left;
    height: 50px;
    margin-top: 50px;
    width: 100%;
}
#ratio_graph li {
    border-bottom: 2px solid black;
    border-radius: 3px;
    border-top: 2px solid black;
    float: left;
    height: 46px;
    list-style: outside none none;
    padding: 0;
    width: 10px;
}
.ratio_val {
    border: 3px solid #000 !important;
    border-radius: 5px;
    font-weight: bold;
    height: 24px !important
    line-height: 23px;
    text-align: center;
    width: 100px !important;
}
.c-50 {background-color: rgb(255, 0, 0); margin-top:50px;}
.c-49 {background-color: rgb(252, 2, 0); margin-top:49px;}
...

Answer 1

Replace your

float: left;

with

display: inline-block;
position: relative;

and your

margin-top: ...;

with

top: ...;

float: left; make your element to a display: inline; and on that margin-top doesn’t work well: CSS display: inline-block does not accept margin-top? but you can use postion:relative; to move your element to the right position. Updated: http://jsfiddle.net/1m2e30rf/25/