Why and how is twentythirteen adding a margin-top to my footer?

by

I’m using the twentythirteen theme with a child theme. I tried to solve the infamous overflowing sidebar problem this way:
– made the content float left with a fixed width
– made the sidebar float right with a fixed width
– added a clearfix class to the parent div

Everything seems about right. BUT, for some reason, I find that the theme is adding a margin-top to my footer that seems to be equal to the difference between the bottom of the sidebar (right div) and the bottom of the entry content (left div), so the margin-top value depends on which page is displayed and is random (i.e. it’s not a value in the stylesheet). I could fix this by adding a margin-top: 0 in the stylesheet but I really would like to understand what’s causing this. You can see what I’m talking about here: http://mywptestsite.is-great.org/page-height-and-sidebar/ There’s a margin-top of 641px on this page!

<footer id="colophon" class="site-footer" role="contentinfo" style="margin-top: 641px;">

Do you know where it’s coming from?
K.

Edit: here’s my custom CSS:

.sidebar .entry-header, 
.sidebar .entry-content, 
.sidebar .entry-summary, 
.sidebar .entry-meta {
    max-width: 620px;
    padding: 0 20px 0 50px;
}

.site-main #primary {
    float: left;
    clear: none;
    width: 620px;
}

.site-main #tertiary {
    float: right;
    clear: none;
}

.site-main .sidebar-container {
    position: static;
    width: 300px;
    height: auto;
} 

.site-main .widget-area {
    padding: 30px 20px 0 0;
}

1 Answer
1

Look in the parent theme’s functions.js. It looks like an implementation of the “sticky footer” concept. The margin is being set via script:

var body    = $( 'body' ),
    _window = $( window );

/**
 * Adds a top margin to the footer if the sidebar widget area is higher
 * than the rest of the page, to help the footer always visually clear
 * the sidebar.
 */
$( function() {
    if ( body.is( '.sidebar' ) ) {
        var sidebar   = $( '#secondary .widget-area' ),
            secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
            margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;

        if ( margin > 0 && _window.innerWidth() > 999 )
            $( '#colophon' ).css( 'margin-top', margin + 'px' );
    }
} );

Leave a Comment