Page scrolling and overflowing over the page to the right problem

[GarethJB84]

Hi there,

I'm pretty new to CSS and having a problem with my page, and am wondering if you guys can help.
Basicly I have bar at the top and a bar at the bottom of the page, which I have stretched from one end of the page to the other with width:100% and margins and padding set to 0;

I then have a 960px holder centered in the middle of the page (no issues with this or anything contained in it as far as i can see)

I have the body width set to width:auto and margin:0 auto; padding:0;

When I view my page in both firefox and IE the page seems to look fine but there is a scrollbar at the bottom of the page and when I drag it the page has stretched out quite a bit. Its strange as the top and bottom bars stretch out part way then stop but then the page carries on a bit still.

Does anyone know what might be causing my problem?

Regards,

Gareth

[donboe]

Hi GarethJB84 welcome to sitepoint. Do you have a link to your page that makes thing more easy

[Paul O'B]

Hi,

If you have a horizontal scrollbar and your screen is wider than the 960px width of your main container then there is obviously something bigger in the page causing the scrollbar.

If you mean you have a scrollbar when less than 960px then yes that will occur due to the fixed width. If you then use the scrollbar to view the content outside the viewport the background on your 100% wide header and footer will stop because they are only 100% wide which is effectively the viewport width only.

When you scroll horizontally you are going into an area that is greater than 100% and therefore the background will not be there. That's just the way that browsers work.

To ensure your backgrounds keep track with other elements on te page you would need to set a min-width on your header and footer equal to the widest fixed width element on your page.

As donboe said we'd need to see the page or some actual code to debug further

[GarethJB84]

Hi,

If you have a horizontal scrollbar and your screen is wider than the 960px width of your main container then there is obviously something bigger in the page causing the scrollbar.

If you mean you have a scrollbar when less than 960px then yes that will occur due to the fixed width. If you then use the scrollbar to view the content outside the viewport the background on your 100% wide header and footer will stop because they are only 100% wide which is effectively the viewport width only.

Hey Paul, I have a 960px holder in the middle of the page which is what im after but my screen resolution is 1600x900, so I want the top and bottom bars stretch out for people like myself with resolution bigger than the main website itself. The problem is it stretches past my screens resolution on the right hand side as it were so there is a scroll bar when I dont need one.
I can't post the code up (not right now anyway, as its not stored on this computer).
I dont want to use overflow:hidden; as i'd like there to be scrollbars vertically and the possibility of a horizontal one if someone cant fit the whole 960px wide part on their screen.

Any tips on what to check would be really appreciated.

best regards,

Gareth

[VernonK]

Do you have left or right padding on your 100% width header or footer? If so, you're going to need to modify your width, say something like:

width:96%;
padding: 0 2%;

The above is just an idea, you would need to modify to fit what your header/footer need.

[GarethJB84]

Hi guys ive had a look at it over the weekend and found this bit of CSS code to be the problem:

#links{
margin:4px 0 0 0;
position:absolute;
width:100%;
z-index:10;
}

When I delete the links div from the html page it stops pushes out too far to the right and the scroll bar disappears (as it should), when i put it back in the stretches the page over again.
Does anybody have any idea why anything set in the above code would cause
this?

Gareth

[Paul O'B]

You haven't set the left position so 100% may be applied from where the element already is sitting in the flow and that would take it wider than 100%.

I'd need to see the whole structure but why are the absolute elements set to 100%. Is there a parent that they need to match width with?

Usually a problem is a combination of the existing structure and the settings applied so we would need to see more for a definitive answer.

The answer will most certainly be that something is too big somewhere

[GarethJB84]

You haven't set the left position so 100% may be applied from where the element already is sitting in the flow and that would take it wider than 100%.

I'd need to see the whole structure but why are the absolute elements set to 100%. Is there a parent that they need to match width with?

Usually a problem is a combination of the existing structure and the settings applied so we would need to see more for a definitive answer.

The answer will most certainly be that something is too big somewhere

Hey Paul, yep I set it to 100% as I thought this would match to the holder div which is 960px. Changing the width of the links div to 960px aswell has solved the problem.
I know it wasn't a definate answer as to why CSS would even cause the problem I was having, but thank you for drawing my attention to the width at 100% and helping me figure out the issue.

Many thanks,

Gareth