title: Twenty Thirteen and sidebar overflows footer - Top Margin
body: <p>I have been trying to stop the sidebar from overflowing the footer in a child theme from Twenty Thirteen in Wordpress 4.0.</p>
  
  <p>I added the following CSS code that I found in another post on another site.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/* Fix Sidebar Overlaping Footer*/
  
  .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
     padding: 0px 20px 0px 20px;
     max-width: 100%;
  }
  
  .sidebar .site-footer .widget-area {
      max-width: 1040px;
      left: 0px;
      margin-top:10px!important;
  }
  
  .hentry {
     padding: 20px 0px;
  }
  
  @media (min-width: 999px) {
  
     #main {
        overflow: hidden;
        margin: 0px auto;
        max-width: 1080px;
     } 
  
     #primary.content-area {
        width: 68%;
        float: left;
     }
  
     .site-main .sidebar-container {
        position: static;
        float: right;
        width: 30%;
        height: auto;
     }
     .site-main .widget-area {
        margin-top: 24px;
        margin-right: 20px;
     }
  
  }
  </code></pre>
  
  <p>The problem is that there is javascript (functions.js in twentythirteen/js) that is adding a huge top-margin to the footer which you can see the results of here: <a href="http://tcsdesignreno.com/addnv/" rel="nofollow">http://tcsdesignreno.com/addnv/</a></p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>/**
       * 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 &gt; 0 &amp;&amp; _window.innerWidth() &gt; 999 ) {
                  $( '#colophon' ).css( 'margin-top', margin + 'px' );
              }
          }
      } );
  </code></pre>
  
  <p>Does anyone have a solution that works to stop the sidebar from overlapping the footer or to stop the js from adding the top margin? I know I have done this before but I can't seem to find the correct combination of code.</p>
  
  <p>Thanks in advance,</p>
  
  <p>Matt</p>