title: bootstrap row height 100% issue
body: <p>I'm working on a project using the framework Twitter Bootstrap 3.</p>
  
  <p>My basic HTML layout is.</p>
  
  <ul>
  <li>Sidebar</li>
  <li>Main content</li>
  </ul>
  
  <p>The sidebar element has 100% height and <code>float: left</code> so that the div classed <code>main-content</code> stays inline.</p>
  
  <p>When I give the sidebar float left property and add a <code>row</code> classed div in <code>main-content</code> div.</p>
  
  <p>The height of <code>.row</code> goes crazy. But instead of <code>float: left</code> if I use <code>position: fixed</code> to the sidebar then the <code>.row</code> height gets adjusted according to content inside the <code>.row</code>.</p>
  
  <p>I did play with the web console in Chrome and noticed that there are two pseudo elements created on row <code>:before</code> and <code>:after</code>.</p>
  
  <p>When I unchecked the css property of those pseudo classes the height of the <code>.row</code> is to the height of the child.</p>
  
  <p>Why do I have this issue when I use <code>float: left</code> to the sidebar?</p>
  
  <p>How can I overcome it?</p>
  
  <p>Did google on this, and I found <a href="https://stackoverflow.com/questions/9493481/weird-css-column-behavior-with-twitter-bootstrap"><strong>this</strong></a>. But it doesn't help me.</p>
  
  <p>Also I've created a <a href="http://jsfiddle.net/GeA7N/" rel="nofollow noreferrer"><strong>fiddle</strong></a> to demonstrate the strange behaviour of the <code>.row</code> classed div where it extends to almost to screen of the height but there's nothing present inside the <code>.row</code> element.</p>
  
  <p>Someone help me to get this clarified and fixed.</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p><strong>EDIT : Why the height of the <code>.row</code> div is 100% when I didn't define it's height?</strong></p>