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.
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.
<div> in HTML needs to be properly closed. If the template responsible for displaying the page has an unclosed
<div> tag, then this would break the layout.
Similarly, an unwanted closing </div> 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.
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.
To make sure that the issue is not caused by a WordPress plugin, you can temporarily deactivate all WordPress plugins on your website.
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
<div> 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.
When looking at the code, you need to make sure that any
<div> tag that is opened also has a closing
Similarly, you also want to look for orphaned closing </div> tag that does not have a corresponding open <div> 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.
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
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.
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.