title: how to enable scrolling rather than squashing divs together
body: <p>on my website it is a div based layout when the window is reszied everything is pushed together. Such as images overlap or are moved below each other and divs also overlap each other.</p>
  
  <p>How can I get it to scroll when the content of the div is greater than the window size, similar to facebook if you resize the window it prevents anything overlappting and just makes the user scroll?</p>
  
  <pre><code>body
  {
      background-color: #B0B0B0;
      color: #ffffff;
      margin-top: 0px;
      margin: 0px;        
  }
  
  #header
  {   
      width: 100%;
      height: 100px;
      margin: 0px;
      padding: 0px;
  }
  
  #content
  {
  
      width: 80%;
      height: 800px;  
      margin-top: 50px;       
      margin-left: auto;
      margin-right: auto;
      padding: 30px;      
  }
  
  &lt;div id="header"&gt;
  [Header]
  &lt;/div&gt;
  &lt;div id="content"&gt;
  [Content]
  &lt;img src="image1.png" /&gt;&lt;img src="image2.png"/&gt;&lt;img src="image3.png" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The html is like that but obviously with more content</p>
  
  <p>Hope I haven't made this too confusing, thanks.</p>