title: Aligning Multiple Tables on Different Rows with Bootstrap
body: <p>I'm using Twitter Bootstrap 2 and having an issues getting tables to align.</p>
  
  <p>I have a view in my Rails app where I want to show 4 tables - 2 tables per row (2 x 2), like this:</p>
  
  <pre><code>|   table   ||  table   |
  |   table   ||  table   |
  </code></pre>
  
  <p>instead, I'm getting this:</p>
  
  <pre><code>|   table   ||  table   |
           |   table   |
  |  table   |
  </code></pre>
  
  <p>The first two tables are aligned like I want, but the third table is not horizontally aligned correctly I can't figure out why.</p>
  
  <pre><code># view
  &lt;div class="container"&gt;    
    &lt;div class="row"&gt;
      &lt;%= render :partial=&gt;"article_count", :locals=&gt;{:most_popular_articles=&gt;@most_popular_articles}%&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  
  # _article_count
  &lt;% @most_popular_articles.each do |article| %&gt;
    &lt;div class="span5"&gt;
      &lt;table class="table table-hover"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            # header names
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;% user.each do |user| %&gt;
            &lt;tr&gt;
              # field values
            &lt;/tr&gt;
          &lt;% end %&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="span1"&gt;&lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Here's a <a href="http://goo.gl/BqORxT" rel="nofollow">link to the page</a> so you can see how it looks, as well as the full CSS and HTML rendered.</p>