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)