WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Fix the Sidebar Below Content Error in WordPress

How to Fix the Sidebar Below Content Error in WordPress

Last updated on November 21st, 2012 by Editorial Staff
34 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

34 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

40 Comments

Leave a Reply
  1. Alessio says:
    Oct 19, 2020 at 4:22 pm

    Thank you for sharing that solved my issue. I’m glad to see I wasn’t the only one experiencing it.

    Reply
    • WPBeginner Support says:
      Oct 20, 2020 at 10:18 am

      You’re welcome, glad our guide was helpful :)

      Reply
  2. Gina Detwiler says:
    Aug 19, 2019 at 11:36 am

    I’m not certain how to find that div element. Can you elaborate a bit? I’ve had this problem from the beginning with my site and don’t know how to fix it.

    Reply
    • WPBeginner Support says:
      Aug 20, 2019 at 9:55 am

      You would want to take a look at your custom theme’s code in a code editor and that should help find the div that is incorrect, you could also take a look at your site using inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Reply
  3. Shai says:
    Jun 3, 2018 at 7:57 am

    Thank you so much!
    You just saved me a lot of time trying to resolve it.
    As you said I had an extra div element closed

    Reply
  4. Dale Jennings says:
    Mar 28, 2018 at 7:51 pm

    I am trying to put my current posts on the left and recent posts in a right sidebar and the sidebar is down at the bottom of the page, also it is too wide, and I do not understand what you were talking about since I am new to this. what is an easy fix?Or is there one?

    Reply
  5. Ayla says:
    Dec 31, 2017 at 8:29 am

    I’m having the issue where my sidebar is showing up on the bottom of every page. I am not very savy with this so have not done anything fancy other than transfer my domain from google recently. I have been building the site in wordpress and did not have any issues until I changed the theme. I tried the instructions above but couldn’t find any of those things.

    Reply
    • WPBeginner Support says:
      Dec 31, 2017 at 3:08 pm

      Hi Ayla,

      Try switching temporarily to your previous theme or a default theme. If this resolves the issue, then the issue is with your theme. Try reaching out to theme developer to see if they can help you fix that.

      Reply
  6. Jared H says:
    Dec 8, 2017 at 8:47 am

    Fixed my issue, thanks for posting!

    Reply
  7. Dene says:
    Oct 23, 2017 at 5:37 am

    thanks guys – this post just solved my problem. Much appreciated

    Reply
  8. Donald Efiom says:
    Jul 11, 2017 at 8:00 pm

    I have the same problem right now and I can’t seem to find where to edit the HTML of the shop page im diaplayin products using the wcommerce plugin. When I inspect element on my browse, I can debug the error and correct it but in my actual root directory, I can’t find the page that holds the HTML of the shop page of woocommerce that I can edit. Pls help!

    Reply
  9. Maria Appleby says:
    Mar 2, 2017 at 9:40 pm

    For the life of me I cannot fix my sidebar issue. I searched for open blocks. I removed one blog post that was wonky with HTML due to me copying content. I tried a different theme. I took off my widgets (and then tried to add one to see what would happen – the “follow blog” button” – still on the bottom). I tried the validator but don’t really understand what it is telling me. When I entered different blog post urls, I got the same error messages. I’m sorry I sound so stupid….I’ve had the blog a long time, but only recently started adding a lot of content, and I don’t really know what I’m doing yet. THe sidebar ended up from the right side, to the bottom of the blog, very recently (past couple of days). Can you help me?

    Reply
    • WPBeginner Support says:
      Mar 3, 2017 at 5:03 pm

      Hey Maria,

      Seems like you are using a WordPress.com blog. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.

      Reply
  10. Sparsh Goyal says:
    Feb 8, 2017 at 5:15 am

    I have same problem but unable to solve it. Only my home page have this problem. Post-type page and Page-type page are working well. My home page sidebar is going on top rather than going just next to my content. Can you please check what is going wrong in my website. My site is coasilat.com

    Reply
  11. Mustafa says:
    Dec 12, 2016 at 8:04 pm

    Thank you. It is sorted the problem. it was and extra div element. when i get rid of it problem is fixed.

    Reply
  12. Jan Reilink says:
    Nov 13, 2016 at 4:06 am

    Lifesaver, thank you!

    Reply
  13. Asha Shendre says:
    May 22, 2016 at 4:10 am

    I had troubled whole day for this.
    problem solution got only here.

    Thank you..
    Thank you very much sir…

    Reply
  14. Harish says:
    Apr 8, 2016 at 10:08 am

    Thank you for helping out

    Reply
  15. Sly says:
    Feb 23, 2016 at 2:40 pm

    Hi, I’m a beginner. I don’t know ANYTHING about CSS or HTML code, I don’t edit my theme, I have no child theme. I only add plugins for whatever I need to do. I see to be having the issue with ALL MY BLOG POST PAGES. The sidebar is below the blog posts. I have no idea what is a div and how to fix it. Dear pros, what would be the best way for my to solve this sidebar issue?

    Reply
    • Tamara says:
      Feb 2, 2017 at 2:21 pm

      I’m a beginner and not a coder either, but was able to solve this problem by using the W3 Validator link on this page. At the top of the validator, under Options, I checked all available then entered the web address of my blog and ran the validator. Below a numbered list of errors was a very detailed (and intimidating, but hang in there) display of the errors as they’re located within the text of my blog. I focused on the mentioned in this article. Scrolling through the detailed report, I found one error that was highlighted in red. Since my text was displayed, I could see that it was in one of my blog posts just after an internet link I’d inserted. I went to that blog post on the WordPress dashboard, clicked “edit” and deleted the link. (Holding down “delete” to be sure I got any invisible anything that might be there and backspacing a couple of letters for the same reason. I then saved the blog post. My webpage was fixed! I then re-edited the blog post to add back in the link and all remained fine. Problem solved.

      Reply
  16. Lisa W Boyle says:
    Feb 22, 2016 at 11:35 pm

    Thank you I was able to immediately find and fix the problem based on your instructions. I found I placed and extra in my single.php file. Your a live saver, thank you so much!

    Reply
  17. Roney Oenophile says:
    Nov 16, 2015 at 3:08 pm

    I dont know what wrong I did, pls help me. I was editing text and I accidentally pressed a combination of keys which changed the way it looked. few buttons like full screen is missing now. And the publishing button is moved to left side. And the pic that I uploaded with the post moved upside my content and it is very big now. I don’t know how it happened, I don’t know what is the problem. I am not computer friendly. I usually write posts. Pls help me. The address of my page is wordpress.com

    Reply
    • WPBeginner Support says:
      Nov 16, 2015 at 5:06 pm

      Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog. You need to contact WordPress.com support.

      Reply
  18. Danielle says:
    Aug 18, 2015 at 10:05 pm

    First time taking over updating of our site…tried to update the static home page and somehow my sidebar went to the bottom. I can’t see any or tags….help! I don’t want to tell the person i took over from i already screwed up if i can figure out what i did!

    Reply
  19. giovanni says:
    Jun 29, 2015 at 2:09 pm

    Can somebody please help me i have the same problem…

    this is my header.php

    Reply
  20. Susan says:
    Jan 4, 2015 at 12:18 am

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

    Reply
  21. Leah says:
    Jul 23, 2014 at 2:17 am

    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

    Reply
  22. Sam says:
    Mar 20, 2014 at 6:50 am

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

    Reply
  23. srik says:
    Feb 13, 2014 at 2:40 am

    Thanks a lot for this! Was really helpful

    Reply
  24. Amy says:
    Jan 25, 2014 at 6:36 pm

    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!!

    Reply
  25. sean says:
    Jan 23, 2014 at 6:16 am

    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.

    Reply
    • Sean says:
      Jan 23, 2014 at 6:18 am

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

      Reply
  26. David Pomazzo says:
    Jan 9, 2014 at 6:15 am

    can you look at my website and help me? http://www.americasfreedomfighters.com/ 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

    Reply
  27. Jen says:
    Dec 14, 2013 at 2:06 pm

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

    Reply
  28. Cecilia says:
    Dec 10, 2013 at 5:28 pm

    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!!!! =)

    Reply
    • WPBeginner Support says:
      Dec 11, 2013 at 1:12 pm

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

      <div style="clear:both"></div>
      </div>
      <!-- .hfeed -->
      
      Reply
  29. Katie Clark says:
    Jun 14, 2013 at 2:51 pm

    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
    http://clarkscondensed.com/

    Reply
    • Editorial Staff says:
      Jun 16, 2013 at 9:32 am

      Your site looks fine in Chrome.

      Reply
  30. Doomish says:
    Nov 21, 2012 at 5:33 pm

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

    Reply
  31. kathy says:
    Nov 21, 2012 at 2:53 pm

    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.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Smash Balloon Coupon
Smash Balloon Coupon
Get 50% off Smash Balloon's powerful social media feed plugins.
MemberPress
MemberPress Coupon
Get up to 50% OFF on MemberPress WordPress premium membership plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.