Sidebar overlaps footer in TwentyThirteen

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 – https://www.ads-software.com/plugins/sidebarautomizer/