How to Fix the Sidebar Below Content Error in WordPress

Are you trying to fix the sidebar below the content error in WordPress?

This issue occurs with WordPress templates using a two-column layout for content and a sidebar. Due to a slight change in code, the sidebar starts appearing below the content instead of next to it.

In this article, we’ll show you how to easily fix the sidebar below content error in WordPress.

Fixing the sidebar below content editor issue

What Causes The Sidebar Below the Content Issue in WordPress?

The most common cause of the sidebar appearing below the content is an HTML or CSS error breaking the layout.

Each

in HTML needs to be properly closed. If the template responsible for displaying the page has an unclosed

tag, then this would break the layout.

Closing all divs in WordPress theme layout

Similarly, an unwanted closing

tag may also affect the layout and cause the sidebar to move down.

Apart from HTML, CSS also affects the overall design of every element on your website. It is used to define the width, alignment, and floating of elements in your layout.

To put it simply, if the width of your content area is more than the available space, then it will force the sidebar to move down.

Sidebar below content area

That being said, let’s take a look at how to easily troubleshoot and fix the sidebar below the content error in WordPress.

Fixing The Sidebar Below The Content Error in WordPress

First, you will need to find out what specific code is causing the sidebar below the content issue in WordPress.

1. Undo recent changes to your WordPress theme

Usually, the issue is caused by changes in your WordPress theme files.

If you recently made any changes to your WordPress theme or child theme, then examining those changes will be a quick way to fix the issue.

If you can’t figure out which changes to revert, then continue reading and we’ll show you other ways to troubleshoot.

2. Rule out WordPress plugins

Your WordPress site’s appearance and style is controlled by the theme you are using. However, sometimes WordPress plugins may also add their own HTML and CSS to your website.

For example, adding a contact form on a page or a lightbox popup would load additional CSS and HTML.

To make sure that the issue is not caused by a WordPress plugin, you can temporarily deactivate all WordPress plugins on your website.

Deactivate all WordPress plugins

If the issue disappears, then this means that a plugin was causing the issue. Simply activate all your WordPress plugins one by one, checking your website after each plugin to find out which one is causing the issue.

After that, you can reach out to the plugin’s support to find a solution and report the issue.

3. Find the HTML breaking the layout

As we mentioned earlier, a broken

tag is one of the common causes of the sidebar moving below the content.

Now if the issue is caused in a specific area of your website, then you can check the template responsible for displaying that code.

For instance, if this issue only occurs on single posts, then you may want to check the single.php template. To find out which template to look at see our complete WordPress template hierarchy cheat sheet.

The easiest way to quickly found unclosed div element is by using the W3C Validator tool.

Using HTML Validator tool

You can also use the Inspect tool or code editor apps that help you debug code by highlighting start and end tags of elements.

Debugging HTML error using a code editor

When looking at the code, you need to make sure that any

tag that is opened also has a closing

tag.

Similarly, you also want to look for orphaned closing

tag that does not have a corresponding open

tag.

If you have found the broken HTML, then fixing it will fix the sidebar appearing below the content issue.

4. Find the CSS moving the sidebar below the content

CSS controls the most important aspects of your website’s design. Your WordPress theme uses CSS to define the width of content and the sidebar areas inside a grid layout.

This value is in the percentage of the viewing area available. On mobile devices, your theme would automatically push down the sidebar below the content.

To find out which CSS is causing the issue, you can use the Inspect tool. Simply moving your content to the wrapper field, content section, and sidebar areas will show you their width and height.

Check CSS width issues

For instance, if your content area is 70% wide and the sidebar area is 33%, then it will automatically move down. When you need are calculating these values you may also want to consider the space used by padding and margin values used by each section.

5. Clear WordPress cache

Website not updating

If you are still seeing the sidebar below the content area, then you may want to clear your WordPress cache.

When you make changes that don’t appear right away, it’s often due to caching issues.

It’s common for caching plugins to show you an older version of the same page. Clearing WordPress cache and browser cache would help you see the changes applied to your website.

We hope this article helped you learn how to fix the sidebar below the content error in WordPress. You may also want to bookmark our ultimate handbook of the common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.