[Solved] Div not extending to 100% at lower resolutions.

[Figurehead]

Hello everyone, I need some help. I’m new to the forums (and web design), so take it easy on me. :)

Anyways, I am designing a new website for work and im running into some issues with the header and footer not expanding to 100% of the page width when the window is smaller. I found this article explaining the exact problem I am having with a solution, but the solution is not working for me.

Anyways, here is the site in question: http://www.sao10.com/new/index.asp

Any help or suggestions would be greatly appreciated.

[Shikkediel]

Adding ‘position: absolute’ to body (in the css) seems to solve the issue. As far as I can see, the page is 100% width (minimum 1280 pixels) but positioning is off.

[Paulie_D]

when the window is smaller.

Smaller than what?

Your site is not set up to go smaller than 1400px probably due to min-widths and padding.

You get scrollbars below 1400px.

The HTML looks a little screwy too.

Your linking Jquery in script tags etc inside the body rather than the head.

[Figurehead]

What I mean by a smaller window is if you make the window size smaller the header and footer do not expand the full width of the page. The first link that I posted could probably explain things better than I can.

I set the min-width to 1400px as a quick fix for the issue, but it broke the centering of my navigation because it was centering to 1400px instead of the widow’s width. I have the Jquery scripts in there for the Back to Top button. It doesn’t seem to work unless its in the body unfortunately.

The site seems to be fine at higher resolutions, but not the lower ones.

Setting the position to be absolute does not seem to fix it.

[Shikkediel]

Worked for my own screen size (1280)…
But I think setting body to 100% could be the actual solution.

Edit – width, that is of course.

[Figurehead]

I set the min-width of the body to be 1340px instead of 1280px, then took off some padding of the footer and it fixed the scrollbar issue. So it was the padding in the footer that was causing it.

Everything looks fine now.

Thanks guys for your help, and I will work on cleaning the html up. I will mark this question as solved, but I am still open to suggestions.

Edit: How do you mark this thread as solved?

[Paulie_D]

Edit: How do you mark this thread as solved?

You can’t.

We used to be able to do that but it’s not available right now.

I tend to do that as part of the Mod service. :)

[Figurehead]

Okay, well thanks. :)

[Author]

Posts