How to Fix the Sidebar Below Content Error in WordPress

So you’re clickity-clacking away on your keyboard, working on your WordPress website, when suddenly your sidebar appears below your content where it shouldn’t be. Worse still, there’s no clear error message.

Zeus’ beard! What happened? Did your theme implode??

Before you get angry and rip your shirt off, Hulk-style, or tear your room apart in a flash, Zeus-style, you can relax. It’s actually a common WordPress error and it can be easily fixed.

Today, I’ll show you how to quickly fix your theme when you see your sidebar drifting below the bel—er, content. God-like powers – not required.

Keep in mind: If you aren’t quite able to fix this error on your own after trying the suggestions below, our expert support team is more than happy to help you out for free, 24/7. If you’re not already a member, you can sign up for a free trial and get all the help you need.

What Causes this Sidebar Error?

You were on your merry way, editing your site, when all of a sudden your sidebar shifted from the left or right of your main content area to below your content. Unfortunately, it doesn’t take much for this to happen.

Fortunately, the reason your sidebar is in the wrong place on your page is a small error that’s easily fixed and it can be due to one of the following:

• There’s an error in your HTML code:
  • There’s a div tag that hasn’t been closed in one of your theme files.
  • There could otherwise be an extra <div> or </div> that you need to delete.
• There’s an error in your CSS code:
  • In the style.css file in your theme, there’s a height and width set for an element on your page that’s disproportionate, causing your layout to shift to make way for the larger page part.
  • Alternatively, it could be that the float property is being used incorrectly or not at all.
• A plugin could be interfering with your layout.
• Content or customizations made for a previous theme could be incompatible with your new theme.

It’s a lot less likely that a plugin is causing the issue, but it’s worth keeping in mind that with more and more plugins creating pages intended for custom layouts, plugins could clash with your theme if you choose to use a different page template.

If you switched your theme and your old one had custom content or features that were stored in your database as data but it wasn’t deleted, it could be causing issues as well.

This is also less likely the cause, but there has been an increase in themes being created that have packaged plugins, shortcodes and other features that typically aren’t removed once you switch your theme.

Fixing this WordPress Sidebar Error

Before you go off trying to troubleshoot the issue in all ways imaginable, there are a few places that you can check for the teeny error.

First, you need to take a quick look-see and determine which parts of your site are affected by this error. If:

• Only your pages are affected: you need to check out page.php or other page files you may have.
• The error displays on all your blog posts: double check your single.php file
• Only pages that a plugin automatically created are affected: there’s an issue with that plugin or the theme you used that had the offending plugin bundled with it
• Any page is affected where you added custom HTML or CSS: you need to double check your customizations
• You made changes to your theme: backup up your whole site, remove the changes, then create a child theme where you can include your customizations instead

If you find you need to make customizations to a file, it’s recommended that you keep track of your changes with comments. For details, you can check out 25 Expert Tips for Cleaner CSS Coding for WordPress.

Once you know the exact file that’s affected, you can start to fix them. If your pages or blog posts are the ones showing the sidebar below content error, you need to edit them. This also applies to any pages where you recently added custom HTML or CSS.

Open it up using FTP, SSH or directly in cPanel by clicking the Edit button in the File Manager. Then, find the missing, closed or extra div tag, or fix your CSS. Save the file and if you downloaded the file first via FTP, upload the fixed copy and overwrite the old one.

If a plugin or theme is affected, contact its developer and outline the issue for them so they can include a fix in their next update or else provide you with an alternate solution.

If you used a plugin or theme to make HTML or CSS customizations, go back to where you added the changes, find where the error is, then save your changes once you have corrected them.

Tools to Make Troubleshooting Sidebar Issues Easier

There are also free online tools you can use to automatically scan your code to check for any errors.

You can try any of the following tools to validate your code:

• HTML:
  • W3C Markup Validation Service
  • Validator.nu (X)HTML5 Validator (Living Validator)
  • Online Web Check
• CSS:
  • W3C CSS Validation Service
  • Online Web Check

Once the error has been automagically caught, you can correct it with the steps outlined above.

You can also find more information on code validation in the WordPress Codex.

Wrapping Up

Now you know how to troubleshoot and solve the seemingly random sidebar below content error.

If you would like details on HTML and CSS to improve your skills and avoid issues like this in the future, check out W3School’s HTML5 Tutorials, A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources, 10 Simple Tips for Learning CSS for WordPress and How to Add Custom CSS to Your WordPress Site: 3 Methods Explored.

Have you experienced the content below sidebar error? Were you able to resolve it with the steps outlined here or did you try something else that worked? Share your experience in the comments below.

Tags:

• error
• sidebars
• troubleshooting