title: How to properly display content when I resize the window?
body: <p>I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right.  Below is the css that formats this content.  I'm having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation.  The navigation module/sidebar is fixed.</p>
  <p>I'm using twitter bootstrap as a base.</p>
  <p>Any ideas on what's causing this and how to fix this?</p>
  <h1>css</h1>
  <pre><code>div.sidebar{
      width: 120px;
      position:fixed; 
      top:12%; 
      left:2%;
      overflow-y:auto;
      height:100%;
  }
  </code></pre>
  <h1>html</h1>
  <pre><code> &lt;div class =&quot;container-fluid&quot;&gt;
  &lt;div class = &quot;row-fluid&quot;&gt;
  &lt;!-- left navigation div --&gt;
      &lt;div class = &quot;span1&quot; style = &quot;width:120px;&quot;&gt;
              &lt;div class = &quot;sidebar&quot; &gt;
              #navigation
              &lt;/div&gt;
          &lt;/div&gt;
          
  &lt;!-- middle images div --&gt;
          &lt;div class = &quot;span8&quot; style = &quot;width: 900px;&quot;&gt;
              #lot of images
          &lt;/div&gt;
  
   &lt;!-- social sidebar --&gt;
          &lt;div class = &quot;span2&quot; style = &quot;margin-left: 10px; &quot;&gt;
              #social module with images
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h1>when I make the window smaller</h1>
  <p><img src="https://i.stack.imgur.com/ThAnP.png" alt="enter image description here" /></p>
  <h1>normal</h1>
  <p><img src="https://i.stack.imgur.com/Se7x9.png" alt="enter image description here" /></p>