title: Weird CSS Column behavior with Twitter Bootstrap
body: <p>I've been working on a web application using Bootstrap, and have come across odd behaviour in my columns that I cannot seem to figure out.</p>
  
  <p>Most of the CSS I'm using is just Twitter bootstrap defaults. I've attached screenshots of the HTML structure and the problem itself.</p>
  
  <p><a href="http://i.imgur.com/gpgxS.jpg" rel="nofollow">The Issue</a></p>
  
  <p>It appears that the first div in my main-content div is expanding to match the size of the sidebar, which makes no sense to me.</p>
  
  <p>Also upon further investigation it appears that each child within my #main-content div contains the following CSS, which causes the issue. How might I circumvent it?</p>
  
  <pre><code>.row-fluid:after {
      clear: both;
  }
  
  .row-fluid:before, .row-fluid:after {
      content: "";
      display: table;
  }
  
  .row-fluid:after {
      clear: both;
  }
  </code></pre>
  
  <p>Here is the actual page: <a href="http://d.titanlabs.ca/ai2/test.html" rel="nofollow">http://d.titanlabs.ca/ai2/test.html</a></p>