Support » Themes and Templates » Sidebar overlaps footer in TwentyThirteen

  • Resolved MarkHedley

    (@markhedley)


    Hi, I have found a few others who have had this issue with the TwentyThirteen theme but as yet have no resolution.

    If the sidebar content is longer than the main content then it overlaps into the footer. See http://www.themaynard.net/weddings/civil-partnerships as an example.

    I am guessing/hoping it can be resolved by modifying the CSS but despite numerous attempts I cannot resolve it.

    Thanks in advance of any help.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi Mark,
    Looks like that site isn’t running Twenty Thirteen. Edit: wow, nice modification, didn’t recognize it right away. 🙂

    This is by design: the footer is “overlayed” on the content area on purpose with a bit of transparency.

    With the particular changes to Twenty Thirteen seen on that site you linked to, however, it does look like a bit off.

    The way it’s supposed to work is the sidebar extends all the way down to the very bottom of the viewport, including the footer.

    Your sidebar has its position set to absolute. When it’s absolute, the parent container doesn’t stretch to contain it. This is so that you can position it wherever you want without affecting any other elements. Here are the CSS overrides you need (to override existing CSS, put this at the end after all of the other styles) so that the parent container stretches with the sidebar.

    #main {
    overflow: hidden; /* needed to stretch parent container since children are floated */
    }

    #primary.content-area {
    width: 68%;
    float: left;
    }

    .site-main .sidebar-container {
    position: static;
    float: right;
    width: 30%;
    height: auto;
    }

    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    padding: 0;
    }

    Creativenicci, you are a star and a life saver. That worked perfectly although I had to wrap it in a @media (min-width: … to ensure the normal responsive design still worked

    @media (min-width: 999px) {
    	#main {
    		overflow: hidden; /* needed to stretch parent container since children are floated */ } #primary.content-area {
    		width: 68%;
    		float: left;
    	}
    	.site-main .sidebar-container {
    		position: static;
    		float: right;
    		width: 30%;
    		height: auto;
    	}
    	.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    		padding: 0;
    	}
    }

    Thankyou very much

    Best close this now!

    Once again thanks to @creativenicci for your help

    This is what I have used:

    .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;
    }
    
    .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;
       }
    
    }

    Hi! I’m a designer and it’s my first WP. So be patient, please.
    I’ve copied what @flegmatiq has post and it’ve worked in a child template. But, here comes my question if the images at the main page are aligned to the left or to the right they are cutted. Why happens that?
    I’m still working on localhost,

    .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;
    }

    .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;
    }

    }

    Thanks very much flegmatiq;
    I think testing was absolutely right, and it’s the thing that i was looking for about 2 days. Thanks again. 🙂

    This was mind bugling for me too 😉 That’s why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.

    It works by default with Twenty Thirteen theme. It’s called sidebarAutomizer and can be found at wp repository – http://wordpress.org/plugins/sidebarautomizer/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sidebar overlaps footer in TwentyThirteen’ is closed to new replies.