title: Stop floating DIVs from overlapping
body: <p>I am developing a pure CSS diagram type of graph. Here is a trimmed down version of it: <a href="http://jsfiddle.net/1m2e30rf/" rel="nofollow">jsfiddle</a>. </p>
  
  <p>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: <a href="http://jsfiddle.net/1m2e30rf/2/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>The problem is that I want to keep the height small, <strong>how can I do this without the divs overlapping</strong> the way they are? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="ratio"&gt;
               &lt;div id="ratio_mid"&gt;
                  &lt;ul id="ratio_graph"&gt;&lt;li class="ratio_val c50"&gt;X Comments&lt;/li&gt;&lt;li class="c41"&gt; &lt;/li&gt;&lt;li class="c32"&gt; &lt;/li&gt;&lt;li class="c23"&gt; &lt;/li&gt;&lt;li class="c14"&gt; &lt;/li&gt;&lt;li class="c5"&gt; &lt;/li&gt;&lt;li class="c-4"&gt; &lt;/li&gt;&lt;li class="c-13"&gt; &lt;/li&gt;&lt;li class="c-22"&gt; &lt;/li&gt;&lt;li class="c-31"&gt; &lt;/li&gt;&lt;li class="ratio_val c-40"&gt;X Notes&lt;/li&gt;      &lt;/ul&gt;
               &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;}
  ...
  </code></pre>