title: CSS/HTML Twitter bootstrap fixed columns
body: <p>I'm trying to get some elements on my webpage to stay where they are when scrolling (fixed), but I can't seem to get it working using <code>position:fixed;</code>.</p>
  
  <p>When I try the design gets pretty broken. Everything moves to the right side, and is getting 100% in width automatically. All elements I want to set fixed also stays on top of each other...<a href="https://i.stack.imgur.com/8TpOf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8TpOf.png" alt="see image"></a></p>
  
  <p>This is how it is supposed to look...
  <a href="https://i.stack.imgur.com/oCNpR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oCNpR.png" alt="enter image description here"></a></p>
  
  <p>The header (blue bar) and the row below is going to stay fixed where it is. How would I do that using Twitters Bootstrap?</p>
  
  <p>Here is some HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
  
      &lt;div id="search_wrapper" class="col-md-8 col-md-offset-2 grey"&gt;
  
          &lt;div id="search" class="col-md-12"&gt;
  
              &lt;div class="threed left"&gt;&lt;/div&gt;
              &lt;div class="threed right"&gt;&lt;/div&gt;
  
              &lt;a href="/"&gt;&lt;div class="logo_small"&gt;&lt;/div&gt;&lt;/a&gt;
              &lt;form method="post" class="search"&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;button class="form-control-feedback pull-right" type="submit" name="submit_search"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;input type="text" name="q" placeholder="Søk etter firma, bransje og sted"&gt;
                  &lt;/div&gt;
  
              &lt;/form&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="wrapper col-md-8 col-md-offset-2"&gt;
  
          &lt;div id="locals_wrapper" class="col-md-3 grey"&gt;
  
              &lt;h3&gt;&lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;Steder&lt;/h3&gt;
              &lt;hr&gt;
  
              &lt;?php
  
                  if (isset($data['location']) &amp;&amp; $data['location']) {
  
                      foreach ($data['location'] as $c =&gt; $ms) {
  
                          echo '&lt;div class="county checkbox"&gt;&lt;label&gt; &lt;input class="c" type="checkbox" name="business_county" value="'. $c .'"&gt;'. $c .' &lt;/label&gt;&lt;div class="municipalities" data-county="'. $c .'"&gt;';
                          foreach ($ms as $m) {
                              echo '&lt;div class="checkbox"&gt;&lt;label&gt;&lt;input type="checkbox" name="business_municipality" data-county="'. $c .'" value="'. $m .'"&gt;'. $m .'&lt;/label&gt;&lt;/div&gt;';
                          } echo '&lt;/div&gt;&lt;/div&gt;';
  
                      }
  
                  }
  
              ?&gt;
  
          &lt;/div&gt;
  
          &lt;div id="results_wrapper" class="col-md-9 grey"&gt;
  
              &lt;h3&gt;&lt;i class="fa fa-bullseye"&gt;&lt;/i&gt;Resultater&lt;/i&gt;&lt;/h3&gt;
              &lt;hr&gt;
  
              &lt;div id="results"&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried adding <code>position:fixed;</code> to <code>#search, #wrapper</code>.</p>