[virtual]

Hi Guys,

I am tearing my hair out trying to figure out why my sticky footer does not go the full width of the browser window. It looks fine if you stretch the browser window, but there is a nasty horizontal scroll bar which I cannot seem to get rid of. What am I missing?

Here is the link http://bit.ly/teZxi6

[Ben]

Both #wrap and #header have 1400px widths, which is causing the scroll bar.

[virtual]

Hi Ben,
The #foot is outside the #wrap, so I don't understand why it is being limited by it? I don't mind about the scroll bar, but the footer cuts off.

This post has been edited by virtual: 02 December 2011 - 11:20 PM

[Wickham]

The #header is also 1400px wide, which is inside #wrap also 1400px; wide with margin: auto; so in my resolution there is space on the left, then 1400px of header and wrap causing the scrollbar.

I edited both #header and #wrap to 960px and it solved everything.

[virtual]

The #header has to be that wide to accommodate the design. I guess I should try and get it outside the #wrap, I'm using Genesis and not too familiar with manipulating it.. But this is my problem more than the scroll bar, see where the footer get cut off.

This post has been edited by virtual: 03 December 2011 - 11:06 AM

[Wickham]

If you keep your 1400px width for #header and #wrap, the make the footer divs 1400px too and then they will match what is above. Leave the 1400px widths and try this:-

#foot{
background: #c1b78e url(images/footer-bg.jpg) repeat-
x;
overflow: auto;          width: 1400px;
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
}
.foot{
width: 1400px;             /*960px;*/
margin: 0 auto;
padding-top: 10px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
}

There is a horizontal scrollbar in my 1366px resolution, but I don't get the footer stopping when you scroll right, it continues. Hope that helps.

[virtual]

Thanks for trying Wickham. Unfortunately that doesn't work. The design requires a full width sticky footer and the header image (unless I cut it) is 1400px and then fades into the body background. I guess if I manage to get the header outside the wrap it will work, then I could make the wrap 960px, but as I said before this is Genesis and I'm not too sure how to accomplish that.

[sbsmith]

Never used genesis so not to sure what to look for off top of my head.

Instead of creating one big long header with background put that
header background image into the BODY. And leave header in wrapper and change width of header to 960px;

this may be helpfull post.
http://webdesignerwa...arge-background

and if you want to get rid of your horizontal scroll bar.

A Quick fix is to put..

overflow-x: hidden;

in HTML BODY tag.

But horizontal scrollbar will go when you change the 1400px widths.

Just trial and error.

[virtual]

Thanks for the advice, I am just messing around with it at this point, and actually messing it up. I shall probably start all over again.

[virtual]

Oh my I am so dumb, I had already tried using the html and body tags to display the gradient and the header, but stupid me had a typo in the image file so it was not showing up...duh!!!

Thanks all so far, I'll be back again I'm sure.