Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
WordPress Plugins
View all Guides

How to Fix the Sidebar Below Content Error in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Fix the Sidebar Below Content Error in WordPress

Recently one of our users asked us the question: how to fix the sidebar below content error in WordPress. This is not the first time, we have gotten this question, so we decided to write a post about it. In this article, we will show you how to fix the sidebar below content error in WordPress.

Why is my Sidebar dropping Below my Content?

The reason why your sidebar is dropping below your content is because there is a HTML or CSS error in your theme.

How can I prevent my sidebar from dropping below the content?

We have troubleshooted this issue for numerous users. 9 times out of 10, the reason is the same. There is an unclosed div element on the page. It could also be that there is an extra div element being closed on the page which makes it seem like that your sidebar is outside the wrap element. So what does this mean in English? Let’s troubleshoot it step by step.

Is this something that started happening recently? Is it only happening on a specific post or page? If your answer is YES, then the following fix is for you.

Look through anything that you changed recently. Did you add a plugin? Made any HTML related changes? Does your specific post or page content has <div> blocks in them? Make sure that they are properly closed. One of the best ways to find out the error is by using the W3 Validator.

Use this chart to understand what is going on:

Div Structure

If you are creating a custom theme, and this issue is happening with you, then there could be a few issues. One issue we have already revealed to you above. Few other issues could be:

Improper width ratio. If your container width is only 960px, then you have to keep things proportional. For example, content width 600px, and sidebar width 300px with 60px margin between them.

The other issue could be float property. You have to make sure that you add float: left; and float: right to the appropriate elements. If you do not do that, then it will not work.

We hope that this article has shown you how to fix the sidebar below content error in WordPress.

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »


  1. Susan says:

    Perfect! Thanks! I knew the minute you said div exactly whose post in my community blog had to be edited!

  2. Leah says:

    This is happening to me right now every time I try out a new theme. Only one widget stays on the sidebar and the rest goes to the bottom of the content. But when I go back to my current theme, everything looks okay. I still can’t figure it out. :P

  3. Sam says:

    Ah! You just saved me a ton of time and frustration! Thank you

  4. srik says:

    Thanks a lot for this! Was really helpful

  5. Amy says:

    Thank you for this post. I am trying to fix this problem on my website right now. I tried everything mentioned in this post, but I still am having issues. I know a little about websites, but I am at a total loss as to why my top navigation bar is going onto 2 lines and why my sidebar is being pushed to the bottom. My website is not live yet, but here is the website

    Thank you for any help!!

  6. sean says:

    Similar problem with my bespoke blog inside my website; side bar slips under the footer if there isn’t enough content to push it down.

    I found that removing (or safer, commenting out) the following sorted the problem:

    I don’t know what this empty div is for & so far it hasn’t adversely affected the blog. Another more obvious reason is due to divs without closing tags – it’s a bit harder to keep track of all your open/closed div tags in WP as the footer & header are removed unlike a standard HTML site.

    • Sean says:

      Er, that is commenting out the empty “delimiter” div at the bottom of various WP pages – it disappeared from my original comment!

  7. David Pomazzo says:

    can you look at my website and help me? i inserted google adsense and now my sidebar is pushed to the bottom and i have a story going up on the sidebar! thank you so much

  8. Jen says:

    THANK YOU! It was the content width that did it for me ;)

  9. Cecilia says:

    I have this problem and I can’t solve it (I’ve been trying for several days)

    Here is my site:

    Please, I really need help. Thanks!!!! =)

    • WPBeginner Support says:

      You probably need to add clear before ending your .hfeed div like this:

      <div style="clear:both"></div>
      <!-- .hfeed -->
  10. Katie Clark says:

    I have this problem, and I don’t even know where to start, as I haven’t done any editing today. Any suggestions? Here is my site

  11. Doomish says:

    Awesome tip! Its gonna be really helpful, and Kathy’s comment is typically what happens to me.

  12. kathy says:

    Since most themes have the proper CSS, I find this is almost always a problem of improperly closed HTML. Usually it occurs on a specific page, because the user has tried to add her own HTML in the post editor and things went wonky from there. Simple error, but can take a long time to debug.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.