Grow your CSS skills. Land your dream job.

Footer Help – Won’t Go Across Page

  • # April 8, 2012 at 6:11 pm

    Hello all,

    I’ve got an annoying problem I can’t seem to solve – I’m trying to get my footer to go all the way across but there is white space both on the left and right sides.

    I’m very new to CSS so I’ve probably dug myself into this problem but I can’t seem to find any solutions.

    The site is kangaroobranding.com and I’m trying to get my footer to look like this. I’m in a Genesis child theme for wordpress and I have 3 footer widgets that have filler text in as well.

    I think this is the code you need? – from my style.css file.

    /* Footer Widgets
    
    */

    #footer-widgets {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 0 1px 2px #999;
    -webkit-box-shadow: 0 1px 2px #999;
    background-color: #4D4D4D;
    border-radius: 0px;
    box-shadow: 0 1px 2px #999;
    clear: both;
    font-size: 14px;
    margin: 20px auto 0;
    width: 100%;
    }

    #footer-widgets .wrap {
    overflow: hidden;
    padding: 25px 30px 10px;
    }

    #footer-widgets .widget {
    background: none;
    border: none;
    margin: 0 0 15px;
    padding: 0;
    }

    #footer-widgets p {
    font-size: inherit;
    margin: 0 0 10px;
    }

    #footer-widgets ul {
    margin: 0;
    }

    #footer-widgets ul li {
    border-bottom: 1px dotted #ccc;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 5px;
    word-wrap: break-word;
    }

    #footer-widgets #wp-calendar thead,
    #footer-widgets #wp-calendar td {
    background: none;
    }

    #footer-widgets .widget {
    margin: 0 0 15px;
    }

    .footer-widgets-1 {
    float: left;
    margin: 0 30px 0 0;
    width: 280px;
    }

    .footer-widgets-2 {
    float: left;
    width: 280px;
    }

    .footer-widgets-3 {
    float: right;
    width: 280px;
    }

    /* Footer
    */

    #footer {
    clear: both;
    font-size: 14px;
    margin: 0 auto;
    width: 100%;
    text-shadow: 0px 0px #fff;
    background-color: #4D4D4D;
    }

    #footer {
    text-align: center;
    }

    #footer .wrap {
    overflow: hidden;
    padding: 25px 10px;

    }

    #footer p {
    font-size: 14px;
    }

    #footer a,
    #footer a:visited {
    color: #ffffff;
    }

    #footer a:hover {
    color: #ec9208;
    text-decoration: none;
    }

    #footer .gototop {
    float: left;
    width: 20%;
    }

    #footer .creds {
    float: right;
    text-align: right;
    width: 75%;
    }

    Also, whenever I edit my Wrap section the entire site goes haywire so I’m hoping for a solution that will allow my footer to go across the entire page without disrupting anything else.

    Thank you very much!
    Ryan

    # April 8, 2012 at 6:13 pm

    You’ll need to move the footer outside of the #wrap. As long as it’s in there, it will be restricted to the 960px width that you assigned to #wrap.

    Right now you have this markup:


    [wrap]
    [nav]
    [header]
    [home-welcome]
    [home-slider]
    [inner]
    [footer-widgets]
    [footer]

    And this is what you need:


    [wrap]
    [nav]
    [header]
    [home-welcome]
    [home-slider]
    [inner]
    [footer-widgets]
    [footer]

    Hope that helps!

    # April 8, 2012 at 7:03 pm

    Sweet!

    I understand entirely now but I’m just not entirely sure how to do it yet, haha. Is there a code I can implement or do I place those two sections above the [wrap]? Sorry if it’s obvious, I’m still learning haha.

    Thank you for your help!
    Ryan

    # April 8, 2012 at 8:06 pm

    You’ll need to go into the HTML and move the two elements outside the wrap.

    Also, if it helps, add a reset of

    * { margin: 0; padding: 0; }
    # April 8, 2012 at 8:31 pm

    I’m not sure where to edit the HTML as I’m working in wordpress – can I do this with css in style.css?

    Thanks for your help!

    # April 8, 2012 at 9:04 pm

    Try this: in FOOTER.PHP, you should take the last you can find, and move it right above the line

    .

    If you can’t find

    in your FOOTER.PHP, find the code that calls the footer widgets, and place the above that.

    # April 8, 2012 at 9:24 pm

    I’m running a child theme on top of Genesis so the footer.php file I found was in the Genesis folder – probably should have mentioned this before, sorry, long day, hah.

    The code is below:


    < ?php
    /*
    WARNING: This file is part of the core Genesis framework. DO NOT edit
    this file under any circumstances. Please do all modifications
    in the form of a child theme.
    */

    /**
    * Handles the footer structure.
    *
    * This file is a core Genesis file and should not be edited.
    *
    * @category Genesis
    * @package Templates
    * @author StudioPress
    * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
    * @link http://www.studiopress.com/themes/genesis
    */

    genesis_structural_wrap( 'inner', '' );
    echo '';

    do_action( 'genesis_before_footer' );
    do_action( 'genesis_footer' );
    do_action( 'genesis_after_footer' );
    ?>

    < ?php
    wp_footer(); // we need this for plugins
    do_action( 'genesis_after' );
    ?>



    I got an error for any spot I tried to place the last . I feel like I’m so close to seeing the solution but I’m missing it, hah. Thank you all for your help, I do very much appreciate it.

    # April 8, 2012 at 10:18 pm

    Try replacing all that with this:


    < ?php
    /*
    WARNING: This file is part of the core Genesis framework. DO NOT edit
    this file under any circumstances. Please do all modifications
    in the form of a child theme.
    */

    /**
    * Handles the footer structure.
    *
    * This file is a core Genesis file and should not be edited.
    *
    * @category Genesis
    * @package Templates
    * @author StudioPress
    * @license http://www.opensource.org/licenses/gpl-license.php GPL v2.0 (or later)
    * @link http://www.studiopress.com/themes/genesis
    */

    genesis_structural_wrap( 'inner', '' );
    echo '';

    echo '';

    do_action( 'genesis_before_footer' );
    do_action( 'genesis_footer' );
    do_action( 'genesis_after_footer' );
    ?>

    < ?php
    wp_footer(); // we need this for plugins
    do_action( 'genesis_after' );
    ?>

    It does say “This file is a core Genesis file and should not be edited” so I’m not sure if it’s actually allowed, but just give it a try and see what happens.

    # April 8, 2012 at 10:25 pm

    IT WORKED! I keep refreshing my page just to make sure, haha.

    You are a lifesaver, I’ve been stressing over this the entire day.

    Thank you so much!

    # April 9, 2012 at 11:28 pm

    If you are using a child theme, you need to place this in the root of your child theme. If not, you are going to lose this when you update.

    So just copy this file to the child them and make your changes. It will look the same and protect you from updates.

    # May 3, 2012 at 9:31 am

    I am having the same problem using a different theme (fresh cover) on http://theknoizpaper.com/ could you all direct me to the files I might be overlooking? Ive looked everywhere from footer to stlyesheet.

    # January 14, 2013 at 2:30 pm

    Thank you so much, it works!

    # February 25, 2013 at 9:12 pm

    OMG, it does work!!! I had the EXACT same problem as RyanPayne; had searched for ever and couldn’t find the appropriate answer… totally understood the solution here; Senff explained BEAUTIFULLY how we needed to get the footer ‘outside’ of the #wrap; and then… whistles & bells; Senff’s code which TOTALLY WORKS.

    Thanks so much guys!!!! Truly appreciate it!! :)

    # March 7, 2013 at 1:14 pm

    Thanks for the code guys! :)

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".