Jump to content

Footer not repeating properly


virtual

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Picture2.png

Edited by virtual
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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://webdesignerwall.com/tutorials/how-to-css-large-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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...