Page Layout Issues

Question

Please let me know why there is lot of white space below the page content and also why horizontal scroll bar is displayed. Attaching link to zip folder below. Unzip and open index.html.
link text

Answer 1

First lead:

The rule div#content almost works in IE, and does put extra width in FireFox:

The extra width is applied to your div class "content"

div#content { margin: 3px 3px 3px 188px; background: rgb(255, 255, 255) none 
    repeat; min-height: 392px; }

within the div class "container"

div#container { margin: auto; padding: 10px; background: rgb(255, 255, 255) 
   none repeat; position: relative; min-height: 400px; 
   max-width: 100%; min-width: 750px; }

horizontal scroll bar is displayed is for the 188px added to the right of the content. Of course, they need to stay: do not remove them.

add overflow: hidden; to your div#container css rule

On a more general note, you may want to follow the "Progressive Enhancement with CSS" best practice, and separate your css rules in several files (up until actual deployment into production, where you may regroup and compress all your css rules into one tight file)

Answer 2

VonC is right. Add overflow: hidden; to div#container rule. Line 274 of index.css.

Answer 3

For scroll bar what VonC suggested is correct whereas "lot of white space below the page content " is due to : 'min-height' that you have specified. You can use the attribute "auto" for that instead of specifying pixels

Regarding : "When I add overflow:auto; it gives another set of scroll bars inside. " .. For this add overflow:auto to all the divs you have used