Question

I am a starter in webdesign and I ve started my website 3 days ago and constantly had some problems so i deleted my old script and wrote a new one. And now the new one got this problem with the full width of the top section.
My problem:![enter image description here][1]

as you can see at the top right corner of my half resized browser, a “white” space occures. But at full size browser window there is no space taking place…(the smaller the window the bigger the “white” space becomes.

My html script and my CSS script will be here in fiddle:

http://jsfiddle.net/PWrHG/

My question is why and how does this “white” space take place?
Note to you: Ive already found a solution within the script area about how to have a full space but i couldnt find and answere about the difference and why and how is that happening.
ps:I really would appreciate to get an answere.
Kind regards Assil

Answer 1

In :

#top
{   
    width:100%;
}

The width:100% makes the top division stretch to the browser width.So if your browser width is less then 980px then it will be stretch to that width. So lets suppose the browser width is 600px then it will be automatically stretch to 600px. And the left 380px will be the White Space. And because the wrapper is wider then the Top, a scroll bar will be added to the bottom of the page. And the current view have #Top fully stretched to the browser width and #Wrapper overflow the browser width.