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?
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.
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.
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?
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