The sidebar, header, and footer have their names for a reason. They are descriptive, and tell you where each element should exist on a web page. So when your sidebar, which should exist to the left or right of your contents, appears below your contents, it is clear that there is a problem.
The location of these elements is determined by HTML and CSS code. You don't necessarily have to know these languages to solve this problem, but you do need to understand a thing or two, such as the " div ».
Understand the importance of the "Div" element in relation to the sidebar
“Div”, or the tag , is an HTML element. It is a container for different elements that make up a web page, including the contents. Each element must be contained in its own " ".
You should know how opening and closing tags work in HTML by now. For example, when you set a title with a thickness h2 Title and look in the text editor, you will notice that it is enclosed in tags , like this :
The first 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 label is open and not closed or vice versa, this can cause incorrect display on some items, especially if those tags are not part of the tags exempt from having a closing tag like " img "," hr "Etc.
If you open a tag and don't close with , your paragraphs and other content of the article will display with a "Heading 2" style. It is similar to the way in which the elements " div May display correctly if you do not open it and close it properly.
Here is the file "single.php" for the theme " Zerif Lite ". This file contains the code that determines how articles appear in the plugin (For unique items). In the following image, the “Div” tags are highlighted to show you where they open and where they close.
This is a simple demonstration of how div elements work so that we can better determine the cause of a display problem.
Fix display problem on WordPress
Understanding how the "div" elements work is only half the battle. Now you need to determine which file on your site has problems with the "div" elements.
There are a few questions you should ask yourself:
Does this problem exist throughout your site?
Figuring out where this problem is occurring on your site can be a great clue as to where the problem exists. Unfortunately, if it exists everywhere on your site, it will take longer to resolve.
A general issue where the sidebar appears below the content can have a number of different causes, and they'll likely show up in one of these main files:
- footer.php
- header.php
- index.php
- sidebar.php
- style.css
Your theme may come with additional files that determine elements that are displayed throughout your site, but these are the main files that you should consider, to conduct your search.
You can display them directly in the editor which is in the "Appearance" menu on the dashboard.
Does this problem only exist on pages?
Explore a few pages looking for the error. Does the problem only appear on pages? If so, you will have to look at your "page.php" file to find the errors.
Does this problem exist only on the pages of the blog?
Again, you need to compare some of the pages on your site with the different articles on your blog. Inspect your “single.php” file. If the sidebar displays correctly on pages, but not on the blog, then this file will tell you more.
The problem of floating bars
Your theme could be a floating sidebar, and if this is causing sidebars to appear below the content, then you need to get closer to the developer.
The most important property is the property float Which usually appears in two formats:
Float: left; Float: right;
If these are not used properly or not used at all, they can cause items to stack on top of each other rather than side by side. You may also need to use the " clear To correct the problem.
Request the help of experts
If you can not fix the problems using all the above, I invite you to contact us either directly leaving a comment, or via the live chat on the home page.
Otherwise, you can always contact the developer of the theme directly. He who is at the origin of this product, will be better able to answer your needs.
That's all for this tutorial, I hope it will allow you to correct the problem of lateral sidebars that appear below your content.
