Theme twentythirteen widget area clearfix

Question

I've put quite a lot of stuff on my widget area and now if the post is not long enough my widget area spills in the footer area as shown on the image below:

Now, I'm not a designer, but I have been googling and trying to find out where to exactly place the needed CSS (I found I should use some kind of clearfix solution).

I tried adding <div style="clear:both;"></div> in several places (before the footer, before widgets last closing div, and few random ones), but to no luck.

So, a kind request for help to someone who has maybe dealt with this exact issue already.

My post example is: nikola-breznjak

Answer 1

There are many approaches to this. This is because the position: absolute on the sidebar-container is making it overlap over the footer.

Try this CSS to override. This is a static solution:

body.single .hentry // Selects the single posts
{
  min-height: 2000px; // Set this according to the height of the sidebar
}  

This one is a better solution:

To work with only large device width because the below CSS will restructure mobile device elements, To avoid that we can set media-queries

@media (min-width: 992px) { 
  #main {
    overflow: hidden; 
  } 

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

  .site-main .sidebar-container {
    position: relative;
    float: right;
    width: 25%;
    height: auto;
    padding: 0 15px;
  }
}