how to enable scrolling rather than squashing divs together

Question

Hi, 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.

Edit: example When you resize the browser window the images move below each other and the nav messes it. How can I enable scrolling on the whole window before this happens?

Answer 1

add the style

overflow: scroll;

to #content

Answer 2

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

Answer 3

I believe you may want overflow: auto;

Here's a comparison between auto and scroll.

Answer 4

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 5

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