2

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;
}
  • If the problem doesn't occur in the default twentythirteen then it is something you've added in your child theme. Or, it is coming from a plugin. Kind of hard for us to pinpoint the source. – helgatheviking Feb 6 '14 at 23:43
  • It's not something I added. I only made the changes mentioned above. I added my cutom CSS in my first post. This margin-top is from the original theme, I didn't add this. – Kimberley Furson Feb 6 '14 at 23:49
  • Looks like a pure CSS question. How is that WordPress specific? – fuxia Feb 7 '14 at 0:02
4

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' );
    }
} );
  • 1
    Thanks. In the end, I couldn't solve this problem with a simple margin-top: 0; in my CSS. So I removed the colophon id from my php page template rendering this part of the js useless. – Kimberley Furson Feb 7 '14 at 14:12
  • My sidebar is way more short than my content, but I have an huge margin-top over my footer (266px!). Why is that? – Terix Nov 10 '14 at 8:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.