Sidebar Below Content Error – It is one of the most common WordPress issues that you get when you are making a custom WordPress theme or customizing the existing one.
If the sidebar suddenly appears at the bottom of the page as shown in the below image, then it would be a frustrating moment!
So, how to solve this usual WordPress Error?
As I deal with the HTML and CSS a lot daily, I could offer some simple solutions to this WordPress problem.
Before getting into the fixes, let me tell you the reasons why you get the sidebar below content error in WordPress!
Why Your WordPress Sidebar Has Moved To Bottom Of The Page?
If your sidebar is not fixed in proper position on your page, then you have to make sure that any of the following things have happened.
1. Plugin – First, you have to analyze the problem, whether the issue is affecting all the blog posts or specific pages that have been created using the plugin.
2. Div Tag In HTML Coding – If there is any unclosed or extra closed div element exist in the HTML coding of your content section, then it would lead to the Sidebar below content fault in WordPress.
3. Incorrect Width & Float In CSS – By default, the average width of each page is set to be 960 px. By mistake, if you set the excess value for the width, then you will get the sidebar below content WordPress error. Likewise, when you make the fault in the Float alignment property in the CSS, then WordPress sidebar below content issue will appear.
4. Corrupted Theme – When your WordPress theme got corrupted, or due to incompatible customizations, this WordPress Sidebar issue would get raised.
Now let’s see, how to prevent your site sidebar getting below content section.
Tips To Fix WordPress Sidebar Moved Below Content
Here are the necessary fixes for the causes mentioned above for the sidebar at the bottom of page WordPress problem.
1. When you found that any of the 3rd party plugins is causing the issue, deactivate that specific extension.
2. Check all the files and make sure that the Div files are correctly closed. Make sure to remove the unessential or unclosed div element from your index.php file as it would completely mess up the layout.
If you can’t find out the exact div error, right click and view the source code to copy the codes and paste them in the HTML Validator to get the job done!
3. Open your CSS file and check the float property, margin property, width property for content and sidebar section that you have given correctly!
In the above screenshot,
- 1 & 4 – Width Property Management
Content section and sidebar section width property value should tally the total width of your main container width property value.
If you give width property value 80% for the content section, then you should give width property value 20% for the sidebar content section. Now your main content width property value will be 100%.
In the above image, if you have given the width of the primary sidebar as 31%, then your sidebar will get moved below the content, and you will get the error.
- 2. Float Alignment
Float alignment is important! If you want to set your content section on the left part, then your float property value must be left. Likewise, if you’re going to fix your sidebar at the right side of your site, then your float property values must be right.
- 3. Margin Values
Margin property is making space between content section and sidebar section. If you would like to set your desired space between content and sidebar, then you have to calculate well to prevent the sidebar below content error in your site.
Your content section has 65% width property value and sidebar section has 30% width property value then you can do perfect calculation with your margin value that tally your main content width property value of 100% (content width: 65%+ sidebar width: 30% + margin width:0 5% 0 0), so that the margin property value must not exceed the 5% (margin:0 5% 0 0);
4. If you made any changes in the theme, remove them. Take a complete site backup and then create a child theme to make the customizations. Also, update the theme or install its latest version to get rid of this WordPress error.
When you find out the problem and solve it, then you will get the sidebar at the proper position on your theme layout like below!
I often come across the query “Why is sidebar moved below the content?” from the WordPress enthusiasts who would like to play with the theme customization.
So, if you too experience the same WordPress error, then I believe you have got a solution to prevent the sidebar getting below the content section.
Analyze the problem and also check if there is a missed, excess or unclosed tag in the coding. Sometimes, a 3rd party plugin might cause the sidebar issue; get rid of the extension!
Verify the Width value and CSS float properties. Likewise, look at the changes that you have made recently and find out the issue. Before starting anything, take a complete site backup and then proceed.
If you are still unable to resolve the sidebar below content error in WordPress, then it may be due to the broken style.css file. Hence you need to contact an experienced theme developer or designer to find out the issue and get the ideal solution.
I can also help you fix this WordPress sidebar issue; you may Contact Me and explain the problems you get; I’ll try my level best to solve your concerns at the earliest!