title: Aligning divs with different dimensions horizontally
body: <p>I have a tag cloud with different font sizes.</p>
  
  <pre><code>&lt;div&gt;
      &lt;a style="font-size:15px;"&gt;tag1&lt;/a&gt;
      &lt;a style="font-size:10px;"&gt;tag1&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And it looks like this:</p>
  
  <p><a href="http://img69.imageshack.us/img69/5120/49274398.gif" rel="nofollow noreferrer">alt text http://img69.imageshack.us/img69/5120/49274398.gif</a></p>
  
  <p>Now I need to wrap each tag into its own div:</p>
  
  <pre><code>    &lt;style&gt;
          .cloud {float:left}
          .tag {float:left}
      &lt;/style&gt;
      &lt;div class="cloud"&gt;
          &lt;div class="tag"&gt;&lt;a style="font-size:15px;"&gt;tag1&lt;/a&gt;&lt;/div&gt;
          &lt;div class="tag"&gt;&lt;a style="font-size:10px;"&gt;tag1&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Which puts them all over the place. How to make them look like on the first picture?</p>
  
  <p><a href="http://img26.imageshack.us/img26/7355/12644278.gif" rel="nofollow noreferrer">alt text http://img26.imageshack.us/img26/7355/12644278.gif</a></p>
  
  <p><strong>UPDATE</strong>: Here is how it looks if I set fixed height for the <code>.tag</code>:
  <a href="http://img710.imageshack.us/img710/3385/59552565.gif" rel="nofollow noreferrer">alt text http://img710.imageshack.us/img710/3385/59552565.gif</a></p>