virtual Posted December 3, 2011 Report Share Posted December 3, 2011 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 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted December 3, 2011 Report Share Posted December 3, 2011 Both #wrap and #header have 1400px widths, which is causing the scroll bar. Quote Link to comment Share on other sites More sharing options...
virtual Posted December 3, 2011 Author Report Share Posted December 3, 2011 (edited) 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. Edited December 3, 2011 by virtual Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 3, 2011 Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted December 3, 2011 Author Report Share Posted December 3, 2011 (edited) 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. Edited December 3, 2011 by virtual Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 3, 2011 Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted December 3, 2011 Author Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
sbsmith Posted December 3, 2011 Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted December 3, 2011 Author Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted December 3, 2011 Author Report Share Posted December 3, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.