title: many boxes(div elements), has a blank spaces between them
body: <p>I have many boxes(<code>div</code>) are different sizes.<br>
  The following is screenshot about the problem:<br>
  <img src="https://i.stack.imgur.com/b328s.jpg" alt="enter image description here"></p>
  
  <p><strong>My code:</strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="categories_container"&gt;
      &lt;div class="main_category"&gt;
          &lt;div class="categories_title"&gt;&lt;a href="#"&gt; &lt;img src="template/images/image.png" alt="" /&gt;&lt;h2&gt; Title &lt;/h2&gt;&lt;/a&gt;
  
              &lt;div style="clear:both;"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt; &lt;a href="#" title=""&gt; item &lt;/a&gt; 
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div#center_container {}
  div#categories_container {width:65%; margin:5px; float:left;}
  div.main_category {width:197px; float:right; margin:0 10px 10px 0;}
  div.categories_title img {float:right; margin-left:5px}
  div.categories_title h2{float:right; font-size:20px;}
  div.main_category ul {list-style-type:none; margin:0; padding:0}
  div.main_category ul li {margin: 0 0 .2em 0;}
  div.main_category ul li a{color:#6E6B64; font:normal 18px tahoma; display:block; background-color:#f4f4f4; padding: .2em .3em;}
  div.main_category ul li a:hover {color:#F37020; background-color:#e7e7e7;}
  </code></pre>
  
  <p>I want no blank space between every box, no matter what the size of each box.</p>