A very common complaint of bloggers is the sidebar, and sometimes the content (main column) of the blog sliding to the bottom of the page. Sometimes this happen in all the browsers, sometime in one browsers and not the others. This happen most frequently in Internet Explorer. I have previously published post about the same problem at
Sidebar pushed to the bottom of the page. Here I try to explain further what to do about it.
Images and hyperlinks
The most common cause of this problem is having photos or hyperlinks that are too wide/long for the width for the main column or the sidebar. Try saving the post containing the photo or hyperlink suspected of causing it in draft form, and see if that helps (see update below colored in red for a better way). If it does, removing the post or reducing the size of the photo will help. If you are not familiar with manipulation of images, read this post:
Uploading and manipulating images with Blogger and Blogger Beta (click "BACK" button to get back to this page).
Update: I found that a better way is to look at the individual post page by clicking on the timestamp (permalink) at the bottom of the post, or by clicking on the title of the post in the Previous Posts section of the sidebar. If the sidebar is where it should be - at the top of the page, then that post is innocent and you should leave it alone. If the sidebar is at the bottom of the page, then it is that post that is causing the problem and you need to do something about it. With this method, you need not go to trouble of saving it in draft, and then publishing it again)
If it is a long hyperlink, reduce the anchor text to a short text. Some people are fond of writing the HTML for the link like this: <a href="URL">URL</a>. If the URL happens to be a long URL, then you will end up with a very long unbreakable link which will cause your sidebar to slide down to the bottom of the page. Write your HTML for the link this way:
<a href="URL">description</a>
Tracking down the problem
You may also try doing some detective work. Think back to what you did just before it happened. Undo it and see if that helps. You may want to try to track down what is causing the problem. You may try looking at each individual post page and see if the problem occurs. (see update in red above). Try to check to see if the problem is with the template (see below)
Template
Sometimes the problem is caused by incorrect codes or missing or mismatched tags in the template.
Rat reported that once it was caused by a closing comment tag --> without an opening comment tag <!--. HTML tags occurs in pairs - opening tags and closing tags.
If you want to see if the fault is in the template, first
BACKUP your template. If you don't know how to backup the template, read post
How to backup your template (close new window to get back to this page). Then load a fresh template to see if that helps. If the sidebar is at the bottom, then it has something to do with the template. Use a new template, and if you have a lot of customization, lessen your workload by copy-pasting the customizaton from your backup template. If don't want to start all over again, put back the backup template and try to locate the problem, If you can't, then post your problem to the
Blogger Help group (close new window to get back to this page) and see if anyone can help.
Others
Another way to solve the problem is to change the width of the content and the sidebar. When you do this, you have to keep in view how it will affect the way the blog is displayed in different screen resolutions. Read about how to change the width of the content and the sidebar in this post:
How to change the width of the main column and the sidebar (click "BACK" button to get back to this page). If you are using a large screen, and you want to check how those with 800x600 screeb resolution see your blog with the changes, type or copy-paste this into the address bar - javascript:top.resizeTo(800,600) and press the enter key.
Sometimes it is caused by you, and sometime, as I discovered earlier, it can be caused by people commenting in your post, putting long unbroken text or codes. That had happened to me twice. It was most embarassing for me as I have this post which is about how to solve sidebar at the bottom of the page problems, and I wasn't aware of the problem for a long time. Most of the time, I use
FireFox with Google toolbar (close new window to get back to this page), and that problem only was seen in Internet Explorer. I was thus unaware of it for a very long time.
I very often have to include example of HTML codes which contain long unbroken text/code, and in order to do that, I have to put them into a scroll box. If you want to know how to include a scroll box, have a look at post
How to make a scroll box (click BACK button to get back to this page). This can be another source of problem because I have to decide on the width of the scroll box to fit into main column. In one of the blog, I used a modified
Thur's 3 column Minima template (click BACK button to get back to this page). I use a large screen. In that problem post, I had chosen a width for the scroll box which easily fit into the main column in that screen resolution, but recently, I discovered that for those using 800x600 screen resolution (about 10-20% of my readers) the page was screwed up. See screenshot (click to enlarge)
That was for this blog. I think I will change back to the standard Blogger template.
Note: For an actual example of how I try to show a blogger solve this sidebar slide to bottom of the page problem, refer to
Trouble shoot sidebar slide to bottom of the page problem: Actual example (click BACK button to get back to this page)
