how to achieve 100% width footer, (& site centered)

1. 

   tod7 (Member)
   Posted 6 months ago | Permalink

   Hi,
   I'm trying to achieve a 100% width footer. site: http://www.tod7.com
   I saw that footer-container resides inside body-container which is fixed in 2c-l-fixed.css,
   so I changed it to read:
   

   #body-container {
   overflow:hidden;
   width:100%;
   }

   ..as I've seen it via firebug in themehybrid.com itself.
   Now footer-container is free to stretch out 100%,
   ..however, now the site is left aligned, and stays left when scroll-zooming out.

   Does anyone know how to keep the 100% footer, and keep the site aligned in the middle?
   Thx

2. 

   Justin Tadlock (Administrator)
   Posted 6 months ago | Permalink

   You must be a logged-in exclusive member to view this reply.

3. 

   tod7 (Member)
   Posted 6 months ago | Permalink

   Right, that's 2c-l-fixed.css as-is with no changes, however the goal is a 100% width footer, ie: stretching forever off the screen in left and right directions.
   Is a 100% width footer possible with hybrid and the skeleton child theme?
   (the problem being that footer-container width is influenced by the parent element body-container, which is fixed)

4. 

   Kyle D (Member)
   Posted 6 months ago | Permalink

   Just get rid of #footer-container:

   #header-container, #navigation, #container {
   	width: 960px;
   	margin: 0 auto;
   	}

5. 

   Justin Tadlock (Administrator)
   Posted 6 months ago | Permalink

   You must be a logged-in exclusive member to view this reply.

6. 

   Justin Tadlock (Administrator)
   Posted 6 months ago | Permalink

   You must be a logged-in exclusive member to view this reply.

7. 

   tod7 (Member)
   Posted 6 months ago | Permalink

   Okay - that works, however when I zoom out (using the mouse/scroll wheel) the site becomes left aligned.
   What's interesting is that sites like http://themehybrid.com/ and http://sideradesign.com/ manage to have both the 100% stretched footer, and a centered site when zoomed out.

8. 

   Kyle D (Member)
   Posted 6 months ago | Permalink

   When I zoom out on tod7 (after applying my own custom css as posted above), it stays centred, except for one step where the comments jump to the left. didn't look at the css for that, but might just be a bug of some sort.

9. 

   Justin Tadlock (Administrator)
   Posted 6 months ago | Permalink

   You must be a logged-in exclusive member to view this reply.

10. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    Everything looking great except for navigation and footer.
    Nav & footer have a fixed width, but when zoomed out still seem to want to stay left aligned. (?)
    http://www.tod7.com

11. 

    slipn (Member)
    Posted 6 months ago | Permalink

    It's way wonky and out of alignment with a large screen without zooming too.

12. 

    Kyle D (Member)
    Posted 6 months ago | Permalink

    Your nav and footer aren't set to be aligned to the centre, which is why they're appearing on the left - you've set the margin in pixels, which probably looks fine at 100% zoom, but not when you zoom out (the rest of the page gets centred because of the auto left and right margin, but the nav and footer stay to the left, with the # of margin pixels being relative to the zoom) .

13. 

    Kyle D (Member)
    Posted 6 months ago | Permalink

    Also, what slipn said - on my laptop at full screen the menu and the background image don't line up. Is there a reason you want the navigation to be full width?

14. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    I don't actually want a full width nav. The goal is to have a full width footer. So because the footer is inside body-container, which is fixed, when I release this, nav and footer go wonky.

    http://themehybrid.com/ and http://sideradesign.com/ are both built on hybrid (I'm assuming). I wonder how these were done?

15. 

    Kyle D (Member)
    Posted 6 months ago | Permalink

    If you set body-container to 100% and all the other #header-container, #container, #navigation to a fixed width, I don't see how that won't accomplish what you want.

    #body-container { width: 100% }
    #header-container, #navigation, #container { width: 960px; margin: 0 auto; }

    The footer should be left aligned, because you haven't set any margins for it. Maybe adding:

    #footer { width: 960px; margin: 0 auto; }

    will achieve the results you want?

    Do you just want the black background of footer container to extend across the page, because you could also do that with a background image on the body (positioned at the bottom, and repeating horizontally).

16. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    I'm using a background image for the top repeating horizontally, so that option is out. But I'm making GREAT progress thanks to everyone's comments. Thank you.

    The last tick I'm working with is why the page menu bumps left when scrolling out.
    At 100% screen res, looks fine. Then one scroll/zoom tick out, and it scoots left.

    http://www.tod7.com

    I notice this does not happen for my guiding websites: http://themehybrid.com/ and http://sideradesign.com/.

17. 

    Justin Tadlock (Administrator)
    Posted 6 months ago | Permalink

    You must be a logged-in exclusive member to view this reply.

18. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    Here's what I see via a screen of zoom 100% and zoom 75%.
    http://farm5.static.flickr.com/4047/4342675066_ce720c2b08_o.jpg
    See how the menu slides left - is this not showing on your browser?

    also, great tip re: html assuming body rules. Thank you!

19. 

    Elio (Member)
    Posted 6 months ago | Permalink

    todz7, your site resizes correctly on FF 3.6 :)

20. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    Hm, upgraded to FF 3.6 and still see the slight bump to the left when zooming out.
    Will check on that after a full clean and reboot.

    re: html background, this is the same code that works with body, but isn't working here with html:
    

    html {
    	background: url('../../library/images/body-bkgd.gif') repeat-x top center;
    	}

    Anything incorrect jump out at anyone?

21. 

    Justin Tadlock (Administrator)
    Posted 6 months ago | Permalink

    You must be a logged-in exclusive member to view this reply.

22. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    Hm, when I add the above code, the menu left aligns, going left when zooming out.

23. 

    Justin Tadlock (Administrator)
    Posted 6 months ago | Permalink

    You must be a logged-in exclusive member to view this reply.

24. 

    tod7 (Member)
    Posted 6 months ago | Permalink

    Aye, that's what I did. Replaced current #navigation and #page-nav code with above said code. Still had probs though. But it's fixed now -

    What I ended up doing was returning to the original 2column layout stylesheet. Any time body-container went 100%, no matter what I did, it would look fine at 100% and then bump left upon zooming out. By zoom, I mean via the mouse wheel, not changing screen res via properties.

    However, when body-container was back to being fixed, all was well.

    The original goal was to achieve a 100% fluid width footer, or the appearance of one, which I was able to do when you mentioned the use of html as a background element. At first, I thought my only option was to use body for a repeating img, which was occupied by a background img for the top of the page.

    Now with html as an option, I've moved the top img to html, and the bottom img to body. The footer has actually stayed FIXED, (because body-container stays fixed), but with a repeating img at the bottom of body, I achived the appearance of a 100% footer.

    So - for anyone following this thread, that's how it did it!
    Thx for your great tips, Justin!

Reply

You must log in to post.