Sometimes, after editing a WordPress template or CSS file, users discover that their site’s sidebar is now being displayed below the content, instead of beside it. The most common cause of this error is a missing, extra, or unclosed <div> tag in the code.
Open any files, posts, or pages you’ve changed since the sidebar was in the correct place and locate the <div> blocks in them. Verify that each tag has a corresponding closing </div> tag. If you’re having trouble finding the error, try the W3C Validator. Enter the file URL or upload a copy of the file and the validator analyzes it and displays any errors or warnings.
Occasionally, this problem also occurs when editing themes and CSS files. If you’ve been working with these files, check for the following:
- Incorrect container widths – The width of the sidebar plus the width of the content can’t be more than the total width available. To prevent this problem, use relative measurements, such as percentages, instead of absolute measurements, such as pixels.
- Float property errors – Ensure that you use CSS float properties, such as float: left and float: right, to position containers.
If you have any questions or need help, you can always contact HostPapa Support by opening a support ticket. Details about how to open a support ticket are here.