title: Twitter Bootstrap Legacy: Uniform height on spans
body: <p>See the following image:</p>
  
  <p><img src="https://i.stack.imgur.com/VYMV6.png" alt="enter image description here"></p>
  
  <p>What I need is to enlarge the B column to match the first column height, or if I had several columns they always maintains the same height, adjusting to the largest column height.</p>
  
  <p>I have been playing for a while without any success with <code>&lt;div class="clearfix"&gt;&lt;/div&gt;</code> and <code>height: 100%</code>.</p>
  
  <p>I'm using <strong>Twitter Bootstrap 2.3.2</strong>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div id="main" class="row-fluid"&gt;
          &lt;div class="span6"&gt;
              &lt;div&gt;
                  ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                  BBBBBBBBBBBBBBBBBBBBBBBBBB
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              &lt;div&gt;
                  B
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");
  
          #main {
              height: 5em;
          }
          .span6 {
              background-color: lightgray;
              border: 1px solid red;
          }
  
          .span6 &gt; div {
              background-color: lightblue;
              border: 1px solid green;
          }
  </code></pre>
  
  <p>For some reason the fiddle don't resembles the image with the above code, but if you paste it into a <code>test.html</code> it works properly.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>And how can I align the height of the inner <code>span div</code>s? </p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>With @Coop guidance I finally managed to have this sorted out. I come to the following code:</p>
  
  <pre><code>var content_height = [];
  
  jQuery('.row-fluid &gt; div')
      .each(function () {
          content_height.push(jQuery(this).css({minHeight: 0}).height());
      })
      .each(function () {
          jQuery(this).css({
  
          minHeight: Math.max.apply(Math, content_height)
          });
      });
  </code></pre>