when minimizing browser, has a white space when scrolling over

I have a problem with my page when I minimize a browser, say horizontally, and theres overflow. When I scroll over to the hidden section from minimizing, my whole page section is blank.

Does anyone know why this happen? I h开发者_如何学编程ave set my div's to a certain height (i.e. 900px, and not a percentage)?

From your comment, that could well be your problem; your fixed width. Try replacing width with max-width.

max-width will behave much the same as width while the containing element is that wide or wider, but will allow the div to contract when it gets smaller than the width you set.

There's a simple example here. Stretch and resize the bottom right panel to see it in action. If this doesn't work, we'll need to see a page link or a demo on JSFiddle.

Here's a solution for you:

CSS

.wrapper {
    display: block;
    width: 100%;
    padding: 10px 0; /* add some top + bottom padding */
    background-color: #252525;
}
.aligner {
    display: block;
    width: 960px; /* site width */
    margin: 0 auto;    
}
.container {
    display: inline-block;
}

HTML

<div class="wrapper">
    <div class="aligner">
        <div class="container">
            // stuff
        </div><!-- /container -->
    </div><!-- /aligner -->
</div><!-- /wrapper -->

It's not the prettiest, but it allows you to throw 100% width background-colors on any section, and works in < IE8. You can do whatever you need to within div.container (float, position, etc) and it will expand the .wrapper element (thus expanding your background color vertically). You will not experience white space on the right hand side because the background color is applied to the wrapper, which has a 100% width.

Each div.wrapper should be treated as a "section" - 'header', 'feature', 'content', 'footer', etc...