how to enable scrolling rather than squashing divs together

Question

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.

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?

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;      
}

<div id="header">
[Header]
</div>
<div id="content">
[Content]
<img src="image1.png" /><img src="image2.png"/><img src="image3.png" />
</div>

The html is like that but obviously with more content

Hope I haven't made this too confusing, thanks.

Answer 1

Just add overflow:auto; to your div.

You can also use the following if you only want x or y scrolling

overflow-x:auto;

or

overflow-y:auto;

Answer 2

use the overflow:scroll; to enable scrolling in the DIVs

Answer 3

You must add white-space:nowrap; to your body tag.