The sidebar, header and footer have their names for good reason. They’re descriptive, telling you where each element should exist on a web page. So, when your sidebar, which should exist to the left or right of your content, appears below your content, things can get a little confusing.
The placement of these elements is determined through HTML and CSS code. You don’t necessarily need to know these to fix this issue, but you do need to understand a thing or two, such as the div element.
Understanding How the Div Element Relates to the Sidebar
Div, or the <div> tag, is an HTML element. It’s a container for various elements that make up a web page, including the content. Each element needs to be contained within its own <div> tag.
You might be used to how opening and closing tags work in HTML by now. For example, when you give a title a Heading 2 label and look at it in the text editor, you’ll notice it’s enclosed in <h2></h2> tags, like so:
The first <h2> tag is an opening tag. The tag that contains the forward slash “/” is a closing tag. Each element of a web page must contain an opening and closing tag. If a tag is opened and not closed or vice versa, it can cause elements to display incorrectly.
If you give that heading an opening <h2> tag and do not close it with a </h2> tag, your paragraphs and other post content to follow will display with a Heading 2 style. This is similar to how div elements can display incorrectly if you do not open and close them properly.
Here is the single.php file for the Zerif Lite theme. This file contains code that determines how web pages look on single blog posts. I’ve color coded every starting and closing <div> tag to demonstrate how each one must open and close and where they open and close:
This is merely demonstrating how div elements work so we can better explain what may be causing this sidebar below content issue for you.
Solving the Sidebar Issue by Determining Where the Issue is
Understanding how div elements work is only half the battle. Now, you need to figure out which file on your site contains issues with div elements.
There are a few questions you need to ask yourself:
Does this issue exist across your entire site?
Figuring out where this issue is occurring on your site can be a great indicator of where the problem exists. Unfortunately, if it exists everywhere on your site, it may take more time than anticipated to fix the issue.
Whole-site issues where the sidebar appears below the content can have a number of different causes, and they’ll likely appear in one of these main files:
Your theme may come with additional files that dictate what code exists throughout your entire site, but those are the main files you should consider searching through for errors.
You can view them directly in the WordPress admin area by navigating to Editor from Appearance.
Does this issue only exist on pages?
Look at a few pages versus a few blog posts on your site. Does the issue only appear on the pages? If so, you’ll want to look at your page.php file for any errors.
Does this issue only exist on pages with blog posts?
Again, compare a few of the pages on your site with a few of your blog posts. Inspect your single.php file if the sidebar displays correctly on pages but not blog posts. This file contains your code for blog posts.
Does this issue only exist on a specific page or blog post?
If your sidebar only appears below your content on a specific page or blog post, you’ll want to look in the text editor of that specific page or post to make sure any custom HTML you added looks clean.
Mistakes happen, but it’s best to keep custom HTML and CSS out of the text editor as much as possible.
Have you made any changes to your theme recently?
There are thousands of themes available for WordPress, and many of them look fantastic and function splendidly. However, you might be tempted to change a bit of the code in your theme to make it that much more suited to the way you want it to be.
Think back to any custom code or changes to code you added or made to your theme’s files. If you use a child theme, try cutting the code you added to it and pasting it in a text editor on your computer to see if that makes a difference.
This is a great reminder of how useful child themes can be as they give you opportunities to make changes to your theme without losing its original code. Check out our guide on child themes for more information.
It might help to keep a small journal where you document any changes you make to your site. This can be used as a quick reference to recent changes you’ve made if anything goes wrong, such as this sidebar below content issue.
Have you made any changes to your site recently?
Have you made any additional changes to your site recently, such as installing a new plugin, updating a current one, or updating your theme and WordPress in general? If so, you may want to roll your site back to a time when it was functioning normally before attempting to make the change again.
Issues with Div Elements
Okay, so you’ve pinpointed where the problem is. Now, you need to figure out what the problem is. The first step should be hunting down any issues with the div elements in your files, as we explained earlier.
Check to see if all of your div elements have proper opening and closing tags. Make sure the opening <div> tags do not have a “/” in them, and make sure the closing </div> tags do have the “/” in them.
Also, make sure your files do not have an extra <div> tag in them as this can cause the sidebar below content issue to appear.
If you’re still a novice web designer or WordPress user, don’t forget you can right-click on your web page and select Inspect Element. This can make it easier for you to troubleshoot issues with the code on your site.
Issues with Your Site’s Width
The width of your site has a lot to do with how elements display on web pages. The average web page has a width of 960px, which means the width of your content, the width of your sidebar as well as their margins and padding must equal 960px all together.
If your content width is so wide it pushes the total width of your content and sidebar higher than what you’ve set, you’ll find your sidebar below your content as the content width is forcing it there.
Search your style.css file for any issues with the width of your content and/or sidebar.
Floating Errors That Cause Issues with Your Site’s Sidebar
Your theme should already have the float and clear properties sorted out, so if you find issues with them, you may want to consult your theme’s developer.
The more important property is the float property, which typically appears in two formats:
- float: left;
- float: right;
If these are not used properly or not used at all, they may make elements stack on top of one another rather than side by side. You may also need to use the clear property to correct the issue.
Issues with Plugins
This likely isn’t the issue, but it’s still worth checking. If you’ve installed or updated any plugins recently, try deactivating them to see if the issue goes away. If a plugin was causing the issue, determine if you can do without it.
If you can’t, find a suitable replacement or contact the plugin’s developer to see if they have a solution.
Solve Your Sidebar Issues with Your Theme’s Developer
The sidebar and how it displays on your site is handled in your theme’s files. If you have not made any changes to your theme and you cannot figure out how to solve the sidebar below content issue, your best bet may be to contact your theme’s developer directly.
As a reminder, it’s best to purchase themes from reputable developers and theme shops who have great reputations for offering quality themes and reliable customer support.
This definitely isn’t a common issue, which can make it difficult for novice WordPress users and web designers to solve all by their lonesomes. Your best bet is to try and learn how the div HTML element works so you can determine if an extra <div> tag might be the cause of your issue.
If you add your own code to your site, make sure you give it a once over before finalizing your changes. It’s easy to forget to close elements, and it’s even easier to forget to float them or give them the appropriate widths and margins.
Lastly, if you can’t figure it out, don’t hesitate to politely ask your theme’s developer what the issue might be. They may just have the solution you need!