Do you want to fix the sidebar below content error in WordPress?
This issue may occur when WordPress templates use 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 will show you how to easily fix the sidebar below content error in WordPress.
What Causes the Sidebar Below 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 will 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 WordPress 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.
First, you will need to find out what specific code is causing the sidebar below the content issue in WordPress.
That being said, let’s take a look at how to easily troubleshoot and fix the sidebar below content error in WordPress. You can use these quick links to skip to a specific troubleshooting solution:
Method 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 this error.
If you can’t figure out which changes you will need to revert, then continue reading, and we will show you other ways to troubleshoot.
Method 2: Rule Out WordPress Plugins
Your WordPress site’s appearance and style are 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.
To do this, simply head to Plugins » Installed Plugins in your WordPress admin dashboard and check the box next to ‘Plugin’ at the top of the list. Then, open the dropdown menu, select ‘Deactivate’, and click on ‘Apply’.
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 problem.
After that, you can reach out to the plugin’s support to find a solution and report the issue.
For detailed guidance, you can check out our tutorials on how to easily deactivate WordPress plugins and how to deactivate plugins when you’re unable to access the WordPress admin area.
Method 3: Find the HTML Tags Breaking the Layout
As we mentioned earlier, a broken
<div> tag is one of the common causes of the sidebar moving below the content.
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 find an unclosed div element is by using the W3C Validator tool.
Here’s an example of highlighting an element’s start and end tags:
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 an orphaned closing
</div> tag that does not have a corresponding open
If you have found the broken HTML, then fixing it will solve the sidebar appearing below the content issue.
Method 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 will 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 calculate these values, you may also want to consider the space used by padding and margin values in each section.
Method 5: Clear the 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, this is 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 read our ultimate handbook of common WordPress errors and our article on how to display different sidebars for each WordPress post and page.