Blogger: Sidebars Display Below Posts Fix

My Sidebars are at the Bottom of the Page, Please Help!
One very common problem I encounter while browsing the Blogger help forums are people with their sidebars displayed below posts. Everything will be fine for a while, then suddenly poof your Archive, About and Follower gadgets end up at the bottom of the page. To many this appears a random problem with no apparent cause. Fortunately, it is avoidable and fairly easy to track down the issue.

The Cause of this Common Problem
As I'm sure most bloggers are aware, web pages are constructed with primarily HTML code. HTML requires opening and closing tags to compartmentalize a page usually with these tags <div></div>. Tag pairs define the contents of a given tag and established rules determine how those contents are displayed. Blogger extensively uses <div></div> tags to segment or divide a page primarily into columns. Most layouts come with either two or three columns each with it's own beginning and ending tag.

Sidebars end up at the bottom of your blog when the HTML on the page is not properly closed. This usually occurs when a <div> tag within a new post has no matching </div>. In this instance your web browser ends up including the Sidebars underneath the blog posts, because the Center column is unfinished. So, the sidebar gadgets end up within the same container or division as your blog posts. A post(s) is the source of the problem.

Fixing the Problem
First, you must identify which post is causing the sidebars to end up at the bottom of the page. Open up your main page, then click each post link to view individual post pages. A properly tagged post should display with the sidebars in place. You may then check the next post on your blog. Continue until you've located an individual post page with the sidebars at the bottom. You've identified a problem and now it's time to fix it.

Open up the broken post in your post editor either by clicking on the edit pencil in the footer, if you have it enabled, or by navigating into your Dashboard->Posts->Edit Posts and scrolling to find the problem post. Click on the link to edit and preview the post, it should preview incorrectly. Now, return to the post editor and click on the Edit HTML tab. This is where it gets tricky. You need to find which tag is improperly closed.

Since this sidebar display problem typically occurs with an unclosed <div> tag I recommend scrolling to the very bottom of the post to add </div>. Preview the post again and see if this fixed the problem. If so and the post looks correct, save your changes and return to the main page. Assuming no other posts have a similar issue, all should appear correctly. If not, it's time to check each post after the one you've repaired until all problem posts are found and repaired.

A Solution for more Extreme HTML Errors
Unfortunately, the method I've described is not 100% effective since each problem is unique. It's possible additional errors occur or the </div> fix didn't quite get the job done. If you're comfortable with HTML code, you may attempt to fix the problem manually. For many this is a painful task and I suggest an alternate suggestion. Simply start the post over rather than debugging.

Copying the posts Text to a document editor such as word, notepad, etc. and reconstruct it from there. It's likely this problem occurred while using images or embedded media players though, so be sure to copy down any links to that media. Rewrite the post by clearing out the HTML code entirely, then work in Compose mode until you have things fixed. Although this could be a lot of work, I find it's often simpler than attempting to debug the HTML manually unless you have the assistance of a good HTML editor program.

Avoiding Sidebar Problems in the Future
It is very important to Preview your post prior to publishing. A preview should immediately identify similar errors and you'll know not to publish a post until the problem is resolved. I also recommend the New editor as it does a good job detecting unclosed HTML tags and will not even save improperly formed HTML. These two steps help ensure you only make error free posts.

Conclusion
The sidebar below posts is a common problem on the Blogger help forums. It is typically caused by incorrectly structured HTML code within a post. Identify the post with errors, then fix the HTML and your problems are solved. Sometimes this is easier said than done, but at least you know the source of the problem. Be sure to preview new posts and I recommend the New post editor to avoid such problems in the future. I hope you find this post helpful and good luck with your blogging.

Support JSBlogStop:

Donate with Dwolla