WordPress.org

Ready to get started?Download WordPress

Forums

Footer Alignment (26 posts)

  1. littletitus
    Member
    Posted 3 years ago #

    Hello all,

    I've just begun to try and figure out how to create WordPress layouts. Right now, I am struggling on how to get the footer to extend across both of my columns. I'm at a loss for what I am not doing!

    http://i53.tinypic.com/ht8jo1.jpg
    This picture illustrates the problem

    #footer{
    	clear: both;
    	padding: 10px 0 0 0;
    	float: left;
    	height: 50px;
    	background: #413d32; }

    This is my footer coding. I've also tried fiddling with the sidebar, but nothing I've done there has affected it either.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    A screenshot is of no use. What might help is a link to a page demonstrating the problem.

  3. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Try:

    #footer {
        width: 960px; /* Add width that fits your design */
    }

    I can tell you bit more about this if you could post your URL.

  4. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    sorry esmi to jump after you, nobody was here when I was writing this, once posted you appeared. I'll let you help :)

  5. esmi
    Forum Moderator
    Posted 3 years ago #

    Don't worry about it. Jumping in and helping is one way that we can provide 24/7 support. :-)

  6. Emil Uzelac
    Theme Review Admin
    Posted 3 years ago #

    Thanks!

  7. littletitus
    Member
    Posted 3 years ago #

    I apologize, I'm currently using an offline WordPress, as I'm waiting for my uncle to set up WordPress on my server. I will provide a link when I can. As for the other suggestion, it is not affecting the layout. The footer extended across fine until the posts got too long.

  8. esmi
    Forum Moderator
    Posted 3 years ago #

    We really need to be able to see your site before we can offer anything more than wild guesses.

  9. littletitus
    Member
    Posted 3 years ago #

    Alright, it's finally up! Here is my link: http://hollytitus.com/

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    Try adding a clear:both; to your footer's CSS.

  11. littletitus
    Member
    Posted 3 years ago #

    That's already on there, so it can't be that. Any other ideas?

  12. Frumph
    Member
    Posted 3 years ago #

    take the footer div out of wrapper and at the bottom of wrapper put a <div style="clear:both;"></div> before the </div> that closes wrapper

    also there's no such thing as width="" inside of a div

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

  13. littletitus
    Member
    Posted 3 years ago #

    Okay, that fixed that problem! Now, I have one last issue...I'm trying to apply a background color to the footer, but that isn't working either.

    Edit: Make that two problems total..I'd also like to have the sidebar extend down to the footer.

    Thanks again, guys. The coding part of this stuff can be so frustrating sometimes if you're still learning!

  14. Frumph
    Member
    Posted 3 years ago #

    #footer {
       background: #ccc;
       width: 809px;
       margin: 0 auto;
    }

    That didn't work for you?

  15. Frumph
    Member
    Posted 3 years ago #

    Oh jeeze, sorry use .footer and not #footer

    You're using a class, not an ID.

  16. littletitus
    Member
    Posted 3 years ago #

    Woo! Fixing the id/class part solved my other problem...now to figure out the sidebar :).

  17. Frumph
    Member
    Posted 3 years ago #

    Sooo mark this as resolved?

  18. Frumph
    Member
    Posted 3 years ago #

    oh as the sidebar going down to the bottom, you can't there isn't any css markup for height: 100%;

    so what I do is "fool" the design by having a background image in the wrapper area that has a coloration in the right side of the image and other color on the left side and repeat-x(y?) it down

  19. littletitus
    Member
    Posted 3 years ago #

    Edit: Beat me to it! I'll try your suggestion :).

  20. Frumph
    Member
    Posted 3 years ago #

    Actually looking at your code you could put a background: #eee in #wrapper *IF* you put a clear:both; right before the closing </div> of #wrapper

  21. Frumph
    Member
    Posted 3 years ago #

    It appears you didn't use my suggestion of moving #footer out of #wrapper and putting the <div style="clear:both;"></div> (i use <div class="clear"></div> with .clear made in the style.css)

    The #wrapper will never know it's block is closed after the floated content and sidebar unless you do.

  22. littletitus
    Member
    Posted 3 years ago #

    I've made the wrapper changes, but naturally two more problems have cropped up! Is there any way I can stop the wrapper from applying the background to the header area? That, and I need to re-center the footer.

  23. Frumph
    Member
    Posted 3 years ago #

    Well what I do is make 2 wrappers, one for 'entire area of all content'

    which wraps the whole #page that confines the width of the entire site

    then I have a #content-wrapper that handles just the section with content

    so its

    <div id="page">
        <div id="header"></div>
        <div id="content-wrapper">
           <div id="content"></div> // floated left fixed width
           <div id="sidebar"></div> // floated right, fixed width
           <div class="clear"></div> // to make content-wrapper know its block is over
        </div>
        <div id="footer"></div>
    </div>
  24. littletitus
    Member
    Posted 3 years ago #

    Hmm, that made perfect sense to me, but it's still not working. It fixed the footer alignment, but the color is still in the header.

  25. littletitus
    Member
    Posted 3 years ago #

    Oooh, got it! I put in another <div style="clear:both;"></div> underneath the header, and that fixed it. I'm glad I at least solved one of my problems on my own XD...okay, now this is resolved! Thanks everyone, so much!

  26. Frumph
    Member
    Posted 3 years ago #

    well #header, #content-wrapper, #footer { clear: both; } should help

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags