Sometimes when working on your WordPress website something might go wrong and you'll find yourself ending up with your sidebar appearing below your page content messing up the site layout.

This is a common WordPress error and this post will cover 

 - Causes of the error
 - How to troubleshoot the error
 - How to fix the error

## **Causes of the Sidebar Error**

Firstly, I will give a brief illustration of the sidebar error. 

The sidebar error is an occurrence where the sidebar on a page moves from its original position on the left or right side and reappears below the main content on the website.

![](https://www.wpeka.com/rgh/wp-content/uploads/2017/04/Untitled-design-19.png)

[Source](https://www.wpeka.com/rgh/wp-content/uploads/2017/04/Untitled-design-19.png)

The causes of a sidebar error are not far fetched, the sidebar error could occur as a result of 

 - Error in the HTML code
 

> Usually a `<div>` tag not closed properly

![](http://cdn.wpbeginner.com/wp-content/uploads/2012/11/divstructure.png)

[Source](http://cdn.wpbeginner.com/wp-content/uploads/2012/11/divstructure.png)

 - Error in the CSS code

> the common attributes causing this in CSS are the `height` `width` and `float` attribute  

 - An old layout being incompatible with a new theme
 - A damaged plugin (not so common)

## **Fixing the Error** ##

Before attempting to fix the error you will need to check which parts of the website has been affected by the error. 

You can use this checklist for confirmations

 - Check `page.php` page file if only the pages are affected by the error
 - Check the `single.php`file if the error displays on all blog posts
 - Some plugins create pages automatically as a result of their functions, if the error is limited to pages created by a certain plugin then you should double-check that plugin.
 - If the page affected has custom HTML and CSS customizations added by you, you need to review those customizations.
 - If you recently made modifications to your theme then you need to create a backup for the website, remove the changes and create a child theme where you can add the changes



**Useful Tools To Make Troubleshooting Easier**
------------

There are certain free tools on the internet that you can use to automatically scan the code on your website to determine if there are any errors. Some notable ones are

**For HTML Validations**

 - [W3C Validation Service](https://validator.w3.org/)
 - [Online Web Check](https://www.onlinewebcheck.com/)
 
 **For CSS Validations**
 - [W3C CSS Validation](https://jigsaw.w3.org/css-validator/)
 - [ServiceOnline Web Check](https://www.onlinewebcheck.com/)

Use an FTP client to gain access to the file causing the error, find the error, fix it and save.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@gotgame/how-the-sidebar-below-content-error-in-wordpress">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>