Lately certainly one of our customers requested us the query: the right way to repair the sidebar under content material error in WordPress. This isn’t the primary time, we’ve gotten this query, so we determined to write down a put up about it. On this article, we’ll present you the right way to repair the sidebar under content material error in WordPress.
Why is my Sidebar dropping Beneath my Content material?
The explanation why your sidebar is dropping under your content material is as a result of there’s a HTML or CSS error in your theme.
How can I stop my sidebar from dropping under the content material?
We’ve troubleshooted this situation for quite a few customers. 9 instances out of 10, the reason being the identical. There’s an unclosed div aspect on the web page. It is also that there’s an additional div aspect being closed on the web page which makes it look like that your sidebar is outdoors the wrap aspect. So what does this imply in English? Let’s troubleshoot it step-by-step.
Is that this one thing that began taking place not too long ago? Is it solely taking place on a selected put up or web page? In case your reply is YES, then the next repair is for you.
Look by way of something that you just modified not too long ago. Did you add a plugin? Made any HTML associated modifications? Does your particular put up or web page content material has <div> blocks in them? Make it possible for they’re correctly closed. Probably the greatest methods to search out out the error is through the use of the W3 Validator.
Use this chart to grasp what’s going on:
In case you are making a customized theme, and this situation is occurring with you, then there could possibly be a couple of points. One situation we’ve already revealed to you above. Few different points could possibly be:
Improper width ratio. In case your container width is just 960px, then it’s important to preserve issues proportional. For instance, content material width 600px, and sidebar width 300px with 60px margin between them.
The opposite situation could possibly be float property. It’s a must to just be sure you add float: left; and float: proper to the suitable parts. If you don’t do this, then it is not going to work.