title: two scrollable columns with bootstrap
body: <p>I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the "!doctype html" tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?</p>
  
  <pre><code>&lt;!doctype html&gt; &lt;!-- scrolling only works without the doctype --&gt;
  &lt;html xmlns="http://www.w3.org/1999/html"&gt;
  
  &lt;head&gt;
  
      &lt;link rel="stylesheet" media="screen" href="bootstrap.min.css"&gt;
  
      &lt;script src="jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          body, html {
              height: 100%;
              overflow: hidden;
          }
  
          .navbar-inner {
              height: 40px;
          }
  
          .scrollable {
              height: 100%;
              overflow: auto;
          }
  
          .max-height {
              height: 100%;
          }
  
          .no-overflow {
              overflow: hidden;
          }
  
          .pad40-top {
              padding-top: 40px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="navbar navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;a class="brand" href="#"&gt;Title&lt;/a&gt;
                  &lt;ul id="myTab" class="nav nav-tabs"&gt;
                      &lt;li&gt;&lt;a href="#serials" data-toggle="tab"&gt;Serials&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#parameters" data-toggle="tab"&gt;Parameter&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="active"&gt;&lt;a href="#log" data-toggle="tab"&gt;Log&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container max-height no-overflow"&gt;
      &lt;div class="row max-height"&gt;
  
          &lt;div class="tabbable tabs-left"&gt;
  
                   &lt;div class="tab-pane active" id="log"&gt;
  
                      &lt;div class="span2 scrollable"&gt;
                          &lt;div class="pad40-top"&gt;
                              First menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br    &gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu    &lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;    menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;    /br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;    menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;    /br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;menu&lt;/br&gt;main
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="span10 scrollable"&gt;
                          &lt;div class="pad40-top"&gt;
                              First Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;    Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br    &gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/    br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;    /br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;Content    &lt;/br&gt;Content&lt;/br&gt;Content&lt;/br&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;    
  </code></pre>
  
  <p><img src="https://dl.dropbox.com/u/75599/so.png" alt="Screenshot"></p>