title: Making two side by side divs scrollable
body: <p>I really need some help on this please. I literally spent four days to do this but no luck. Then fortunately I was searching for two 100% height side by side divs both scrolling independently if extra contents are added but won't collapse if there is less content than the page height. Here is the solution I found. <a href="http://jsfiddle.net/avrahamcool/58mkp/1/" rel="nofollow">http://jsfiddle.net/avrahamcool/58mkp/1/</a></p>
  
  <pre><code>    &lt;div class="Container"&gt;
      &lt;div class="Header"&gt;
          &lt;h1&gt;Header&lt;/h1&gt;
          &lt;p&gt;if The Header height is not fixed, It will span excatly his needed space.&lt;/p&gt;
          &lt;p&gt;The Padding/Margin between the header and the content and around the layout is optional&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="HeightTaker"&gt;
          &lt;div class="Wrapper"&gt;
              &lt;div class="LeftNavigation"&gt;
                  &lt;h1&gt;Left navigation&lt;/h1&gt;
                  &lt;p&gt;The width of the left navigation is not fixed.&lt;/p&gt;
                  &lt;p&gt;the left navigation will always span 100% height&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="Content"&gt;
                  &lt;h1&gt;Content&lt;/h1&gt;
                  &lt;p&gt;The Content div should always span the available Container space.&lt;/p&gt;
                  &lt;p&gt;If the content exceed the Content available space, it will scroll.&lt;/p&gt;
                  &lt;p&gt;&lt;a target="_blank" href="http://jsfiddle.net/avrahamcool/58mkp/"&gt;Here's a demo of this scenario&lt;/a&gt;&lt;/p&gt;
                  &lt;p class="Important"&gt;This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  *
  {
  margin: 0;
  padding: 0;
  }
  
  html, body, .Container, .LeftNavigation, .Content
  {
  height: 100%;
  }
  
  .Container:before
  {
      content: '';
      height: 100%;
      float: left;
  }
  
  .HeightTaker
  {
  position: relative;
  z-index: 1;
  }
  
  .HeightTaker:after
  {
      content: '';
      clear: both;
      display: block;
  }
  
  .Wrapper
  {
  position: absolute;
  width: 100%;
  height: 100%;
  }
  
  .LeftNavigation
  {
  float: left;
  }
  .LeftNavigation, .Content
  {
  overflow: auto;
  }
  
  
  /*For demonstration only*/
  .Header
  {
  background-color: #bf5b5b;
  text-align: center;
  }
  
  .LeftNavigation
  {
  background-color: #6ea364;
  }
  .Content
  {
  background-color: #66cab7;
  text-align: center;
  }
  p
  {    
  font-size: 1.3em;
  }
  .Important
  {
  font-weight: bolder;
  color: white;
  }
  </code></pre>
  
  <p>But this is in CSS. Can the same thing be achieved in Bootstrap please? And why is the left navigation width not changing? It has not been set as I see? And if possible, can this be achieved in some easier code? I am not much good to understand what's going on actually.</p>