Scroll Problem

[rjsimpson5985]

I have built a new homepage for the company I work for, I am quite experienced with CSS however I am having a quite annoying problem.

The problem I am experiencing is when my browser is not maximised the position of the page is not positioned completely to the left and you can not use the horizontal scroll bar to scroll to the left part of the page that is cut off.

When the page is maximised this is not a problem.

The page is centred using the following css code:

#centerDoc {

position: absolute;
margin: 0;
margin-top: 0px;
/*To centre the box set "left: 50%" and "Margin-left:" to half of the boxes width.*/
/*All other object are embedded within this centred box in the html*/
margin-left: -502px;

Width: 1002px;
Height: auto;
left: 50%;
top: 0;
background-color: #FFFFFF;
/*overflow: auto;*/
}

Web address: http://www.wastecare.co.uk

Has anyone got any idea why this is happening?

Thanks

[abduraooft]

Why do you need to center your page by absolute position? Have a try by changing #centerDoc {/*styles.css (line 4)*/
background-color:#FFFFFF;
height:auto;
left:50%;
margin:0px 0pt 0pt -502px;
position:absolute;
top:0pt;
width:1002px;
} to

#centerDoc{
position:relative;
margin:0 auto;
width:1002px;
}


PS: Don't use floats, if you don't have something to float in the document.
Add *{margin:0;padding:0} into your CSS to remove all default margins and paddings from all elements