Search This Blog

Monday, April 03, 2006

Sidebar pushed to the bottom of the page

(For an updated version of this post, go to Sidebar slide to the bottom of the page: What to do?

For an example of how I go about trying to solve this problem, go to Trouble shooting sidebar sliding to the bottom of the page problem. An example)

A frequent complaint of bloggers is that the sidebar (profile, links, etc.) is pushed to the bottom of the page. This is a very common problem and may occur when viewed with both Firefox and Internet Explorer, or it may be OK with Firefox but not OK with Internet Explorer. This is usually caused by some content such as photo, table or long link exceeding the width of the content or sidebar column. Sometimes it is caused by incorrect coding such as missing or mismatched tags. Rat reported that once it was caused by a closing comment tag --> that had no opening comment tag <-- (HTML tags come in pairs, opening tag and closing tag). Look for these and correct it, and the problem should go away. (If you want to familiarise yourself with HTML, a good place to learn is online at W3schools.)

Other things you can try is to do some detective work. Think back to what you did before it happened. Undo that and see if that helped.

Another way to try to solve the problem is to change the width of the content and sidebar (the total width must not be less than the sum of the two). Look for these block of codes

/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

and

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}

For the minima template, change width:660px; to for example width:800px;

Then look for

#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

and change the widths to, for example, width:500; and width:270; respectively (note that they total up to less than 800).

Preview and see if the changes are what you want. If so, save the template.

Always remember to backup your template before you fiddle with it.

The Weblog Handbook: Practical Advice on Creating and Maintaing Your Blog

73 comments:

  1. Your suggestions are great,but what about those of us who don't know enough about the coding to detect where the problem is in the template? I, too, am having problems with my sidebar at the bottom and can't get it to go back to the top. Any suggestions would be helpful. Thanks!
    www.TreeDoctor.blogspot.com

    ReplyDelete
  2. Your sidebar is at the top in Firefox, but at the bottom in IE. I don't see an obvious cause. Regarding html, a good place to learn is W3Schools
    You may want to post your problem to Blogger User Support and see if anyone is willing to help.

    ReplyDelete
  3. Hi Peter --- I have the same problem, which happened when I switched from Firefox to I.E. The sidebar looks normal on a friend's Mac, via Safari, but not on my PC, via I.E. I asked blogger support for help but I've gotten no reply. Any suggestions would be appreciated!
    http://carolnovack.blogspot.com

    ReplyDelete
  4. It's ok with me. Good work, keep it up.

    ReplyDelete
  5. I have the same problem. Any solutions? I tried saving to a different layout format, but it refused to save. Any ideas how i can do this? thanks

    ReplyDelete
  6. i'm having the same problem, it's only going to the bottom in IE. http://sikeno.blogspot.com/
    can anyone help?

    ReplyDelete
  7. Often it can be solved by changing the content width. Look in the blogger help group for solutions - The problem is very common and not necessarily difficuelt to solve.

    Typically, Firefow shows it fine.

    The first thing to try is to reduce the lenght of extra long links or extra big pictures in the blog. Or to extend the total content width, as mentioned.

    Here are some links to discussions of the problem:

    Increasing width

    Blogger help discussions on the topic with problem solved:
    Sidebar on the bottom of the page, by cma117
    Sidebar at bottom... need very specific step-by-step help, by Ladyjane
    Another newbie with a sidebar at the bottom of the page problem, by Soho-NZ

    OSV OSV. If you go to the blogger help group and write eg. "sidebar on bottom" in search, you will find an almost endless amount of solutions to the problem -
    Fortunately most of them are the same:
    Correcting width
    Reducing links/pictures
    or Repairing broken codes

    and in the discussions are the templates often copied in, so you can see the problem and what to do!

    ReplyDelete
  8. I'm new to this blog business too and am having the same problem. It's getting very frustrating. I've tried changing templates. It does the same thing. PLease help! Thanks!

    ReplyDelete
  9. I had the same problem I reduced pictures sizes to no avail then I selected 'Dots Dark' template and it cured the problem. Don't know how or why, it was my fifth template choice that fixed it.

    ReplyDelete
  10. Your suggestions were great.
    My profile was knocked to the bottom right of my blog. I just followed your advice and change the wording in the code from left, bottom...to right top.
    Thanks a Million, from:
    http://therecipeforamillionare.blogspot.com/

    ReplyDelete
  11. Think sidebars is fixed in all browsers. For Harbor and Minimatemplate.

    #main {
    width:64%;
    position: static;
    float: right;
    }
    #main2 {
    margin:0;
    padding:0;
    }
    #sidebar {
    width:27%;
    position: absolute;
    top: 150px;
    left: 100px;
    float: left;
    text-align: left;
    }
    #sidebar2 {
    margin:0;
    padding:170px 0 20px;

    }
    }
    @media handheld {
    #content {
    }
    #main {
    width:100%;

    }
    #sidebar {
    width:100%;

    }
    }
    Regards, Martine

    www.ittalentsolution.blogspot.com
    www.reclameadvertising.blogspot.com

    ReplyDelete
  12. Thank you so much for a clear and well-written resource for new bloggers like me! In the main, I've been pretty happy with Blogger but do find many resources are written by and for those more advanced in geekways than I. I will definitely be recommending your blog and returning for more help. Grazie! Leather Distrit Gourmet

    ReplyDelete
  13. I'm still trying to figure out where to put the sidebar info in my emplate. Do you have any recommendations?

    ReplyDelete
  14. Thanks for help, i am trying to solve this problem since a long time now.
    I will try right now and see if it is working.

    For everyone who can't find the 'sidebar' in the template code: here is what to do:

    Tape CTRL+F(together) on your keyboard, and a pop up window will appear. just type sidebar, and everytime the word sidebar is in the code, you will stop on it automatically by hiting find next, or find preview.

    Good search...
    Thanks again Peter.

    ReplyDelete
  15. Thanks again for your help. I have added your site to my 'favorites', and will be sure to check back the next time I have a query.

    ReplyDelete
  16. I am in dire need of help!!! I have tried the suggestions listed in this post with the exception of changing templates. I hate to change templates because I have a lot of customizations. It may be that I am missing something obvious that you might be able to notice rightoff the bat. Firstly, the sidebar sunk to the bottom after I had made a deletion in the sidebar column. Secondly, horizontal lines have appeared above profile and at the base of the page. ??? I have been trying to remedy this myself to no good results for the past 4 days. Any help you could provide would maybe save my sanity. . . Last Tuesday night my hits counted by Clustrmaps were at 11,003!!! They notified me that they could/would not publish that amount because of my use of free service - whatever, anyway I doubt that would have impacted what happened but thought I'd throw that in for your considerations.

    I have altered main and sidebar widths, page widths, etc...

    I have visited bloggerhelp. No help suggestions worked. Tuesday is a few days away and need the blog to look decent again. Hits are falling like rocks.

    Desperate for help - will bring attention on top of my site to whoever can fix this, to your site if you'd like - name it!

    Thank you for your time.
    http://www.taylorhicksblues.blogspot.com.

    ReplyDelete
  17. Not sure if this is what caused the problem, but you have 2 suspiciously long link - washingtonpost...

    ReplyDelete
  18. Thank you for answering so quickly; I had that post up before with sidebar still in place, but possibly w/addition of other posts...tried to work on it some this a.m. and now blogger is just rolling in the publishing mode at 0 percent and not progressing from that. Read in help group others having same problem. WHenever blogger gets its act together I'll let you know what I find. Again, thanks!

    ReplyDelete
  19. Thank you, Peter, for the simple instructions. I was able to quickly fix my sidebar problem! You saved me hours of frustration!

    ReplyDelete
  20. Hi,

    I tried the suggestions on this page but can't seem to get my page to display properly still.

    On Firefox, my sidebar is displayed way to far to the right, on IE6, it's pushed all thw way to the bottom. All these happened after i changed my adsense format.

    Would really appreciate is somebody could help me out!
    My Blog is:
    successjunction.blogspot.com

    A million thanks!

    ReplyDelete
  21. Perfect advice!! Thank you so much, this is exactly what I was looking for. :)

    ReplyDelete
  22. the only thing that worked for me was downloading firefox and then hey presto, it all went back to normal and it was fantastic again.

    ReplyDelete
  23. You may be able to view OK with your Firefox browser, but what is important are your readers. Statistics show that the majority are still using Internet Explorer.

    ReplyDelete
  24. My sidebar slid when I moved Adsense below the posts. I had tried moving it back several times but it didn't work. I tried all the suggestions here. Individually they didn't seem to work but together... shortening a link, changing the width on post, sidebar, and footer... I now have the sidebar where it should be. I may have done more than necessary but as long as it worked, fine. Thanks for all the suggeations.

    ReplyDelete
  25. Thanks so much. no i can finally go to bed!!! I had been trying to figure out what was wrong. thanks again
    rafa

    ReplyDelete
  26. On my site: bobbysbody.blogspot.com. I had the problem where the sidebar was pushed to the bottom.

    It was because I had posted a long URL.

    Check to see if in your post for a long unbroken piece of text. It can mess with the sidebar as a result.

    ReplyDelete
  27. thanks for this. fixed my sidebar problem straight away.

    ReplyDelete
  28. Thanks fo such for saving my bacon! Because I work in Firefox I didn't even know I had a problem until I started getting comments that "my drawers were drooping". The problem was strictly in IE. Adjusting the pixels available for the main and sidebars fixed it right up. Your posts are few but very helpful.

    ReplyDelete
  29. Anonymous11:25 AM

    Thanks for the tips, fixed my problem right away !

    I'm bookmarking your blog, it's really useful.

    ReplyDelete
  30. Anonymous2:29 PM

    As another commenter said, thanks for the help, used this info to fix my problems (an open html tag from a youtube clip, found another on a picture). Double thanks!

    ReplyDelete
  31. Friends have informed me that my sidebar with my links is at the bottom of the page. What to do? Help!

    Thanks.

    ReplyDelete
  32. Hi David,

    If you don't know about it, you probably is using FireFox to view your blog as the problem is most common in Internet Explorer. The most common cause is putting someting like photo, long unbroken line, tables, etc that is too wide for the main column or the sidebar.

    This post outline how you can try to troubleshoot the problem. Try going through the post and see if it helps.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  33. Hi David,

    Just noticed that this is the first version of the post on the subject. There is a more comprehensive version at What to do - sidebar slide to bottom of the page. Go through that post and try to find the source of your problem.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  34. Can anyone help me please?
    I put Project Playlist on my blog http://www.startrekfanbob.blogspot.com/ and ever since then the sidebar has been pushed to the bottom.
    I think it is too long for the sidebar, can anyone give me a solution?
    The blog appears perfect on my pc which has 32'' LCD monitor, however on everyone else's pc the sidebar is at the boottom.
    Help!

    ReplyDelete
  35. Hi Bob,

    Please refer to Trouble shooting sidebar slide to bottom of page Part 2. Hope that can help you solve your problem.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  36. I know NOTHING about templates and coding and I FIXED IT!!! Just looked for the margin width and changed it from 720 to 800 like you said! THANK YOU!

    ReplyDelete
  37. Hi Teachbroeck,

    Congrats for job well done!!!!

    One thing I am not clear about, when you mentioned margin width, are you actually referring to the width of the main column (posts) or sidebar plus total width of blog content? If so, read on.

    Only thing is, perhaps you should also consider after changing your, are you happy with how your blog looks like in various screen resolution (roughly same as monitor size)? Do you use large monitors? Some surfers still use 800x600 screen resolution (small screen), eg. those who hates to throw things away plus laptop users, etc. If you want to observe how they view your blog, try typing or copy pasting

    javascript:top.resizeTo(800,600)

    and see what happens. Is part of your content partially hidden and a horizontal bar appear at the bottom of the page, and to see the rest of the content, visitors have to scroll horizontally to see the rest? Remember, many are lazy fellows and don't bother with such stuff and so some stuff you want your visitor to see may not be seen. This is for fixed width templates.

    Or is the main column or sidebar squeezed into a very narrow column until it is not what you like? This is for fluid width template.

    Maybe it is better to try other things like resizing photos, tables, etc., I don't know as I don't know what caused your problem. Just want to say I like to keep the original width of the main column (posts), sidebar and overall width of content constant as this is optimized for visitors using small screen (800x600 screen resolution) which still form 5-20% of my visitors and I don't want to discourage them from visiting again because of some inconveniences. Of course if you are viewing this blog, you will see "wasted" blank space on both sides of the contents, but to see why I prefer it this way, refer to The best template.

    Of course, template choice are very personal thing and different people value different thing and thus will chose different thing influence by their values and priorities. But note that even very large and reputable websites with experts managing and advising BBC News have large blank space to the left of their website when I view their site with my monitor (22" wide screen), and I can show you more examples if you want. They have very good reasons for doing that.

    Peter Blog*Star
    The easiest way to earn something for your blogging efforts

    of this blog

    ReplyDelete
  38. Now to think of it, I should update this post with a new post with greater details or just add a link to a new post with more details

    Peter Blog*Star
    Successes with Kontera ContentLink

    ReplyDelete
  39. I have the same problem with my blog. Side bar slips down to bottom of the page, can any one help me for that.

    http://analogstuff.net

    ReplyDelete
  40. Hi Analog,

    Everyone is going digital, including me. See Digital candlelight vigil and Environmentally friendly presents (gifts). I am sure you don't want to get left behind. Suggest you change your display name to Digital.

    Regarding your problem, regret to say you will have to use the post to try to troubleshoot and solve your problem. If nothing helps, perhaps you should consider backing up current template PLUS Page Element and change new template ("new" template can be the same one you are using minus all the customization) and start all over again (last resort and no guarantee of success).

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  41. Hi Peter,
    Thanks for your comments. I strongly feel that there is nothing digital everything in this world is analog, we use digital only to process things, we cant talk digitally, we cant do many things digitally hance always is the way. May be i am wrong but i think future in this world is for analog not digital.

    I tried to check your comments and implemented them but with no success hence will try to do it with some other means. Kindly check the url of my blog and let me know if you can find any thing wrong.

    Great help.

    http://analogstuff.net

    ReplyDelete
  42. Thanks for this.. The total check, fixed my problem...
    Thanks a lot

    ReplyDelete
  43. Hi Sudha,

    When you say "check", do you mean a piece of paper I can take to my bank to get money? :-)



    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  44. whoyadiddy...spot on my son...
    Sports Betting

    ReplyDelete
  45. Thanks for the tip! I fixed it. It was a video I posted on my recent post and there wasn't closing tag. It had nothing to with my template. Good to know! Always look at your latest post. When all else fails, delete it!

    ReplyDelete
  46. Hi Vanesa,

    You don't need to delete a video that is too wide for the main column or sidebar. You can resize the video (Youtube) to fit the main column or sidebar. Here is more:

    resize LiveVideo

    resize video direct from Blogger

    ReplyDelete
  47. Yeah...it wasn't a resizing issue but a broken tag. The clue that told me look for it was in your post about checking the latest thing you did. I kept thinking it was a template problem. But on your advice I looked into my latest post in html and believe it or not blogger actually clued me into that broken tag. Thanks again!

    ReplyDelete
  48. hi! Struggling with my page. Can you help me, please? When i add images in my sidebars, they acquire different dimension (bigger on the left, smaller on the right one). I do: add image, then when it says "shrink to fit", i get two different pixel values for the two sidebars i have (210, and 150), so that images results in different size, while i want to have them equal on both sidebars. I tried following your instruction, but i got stuck 'cause it seems in my html i dont have the "left-sidebar-wrapper"…weird. I belive I have a minima templte, 3 columns.
    What I would like would be to expand a bit both lateral bars, keeping their size equal.
    I hope you can give me some hints.
    Thanks so much!! Matteo.

    ReplyDelete
  49. For better control of photos, you will need to use <img /> HTML tag with attributes width="a number which is the width of the photo you desire"

    ReplyDelete
  50. I've been trying to get my sidebar back up all day long. I've tried everything you've said but to no avail.

    It happened with my latest post which I've tried to manipulate (photo and link size, length etc) and it's still happening.

    When I take the latest post down it goes away, but I'd like to solve it forever.

    I'm looking to eventually widen the whole look of the blog and add another sidebar on the right.

    How should I go about it all??

    Thank You!!!

    ReplyDelete
  51. Sounds like it is your latest post that is the culprit. I assume you have saved that as draft. I would suggest you create another test blog with the same template as your current problem blog, you open the post in EDIT HTML mode, copy and paste into the test blog and try to see what in that post is causing the problem

    ReplyDelete
  52. I created a blog in 2005 that has encountered the problem of the right sidebar positioned down the bottom of the page on a PC.

    Your advice was spot on and the problem is now solved.

    Thank you very much for your blog you are a legend.

    ReplyDelete
  53. Hey friend, me i have a great problem... When am trying to post a POST, my side bar is going on the bottom of my page...

    http://knight-nirvan.blogspot.com

    Reply me!!

    ReplyDelete
  54. So helpful...

    I've bookmarked this blog.

    Thanks very much

    ReplyDelete
  55. Thanks Peter, even publish a shorter version if possible.

    ReplyDelete
  56. u have no idea how have u saved my life... now i have two problems... i embed 2 widgets ( a mp3 player and a cbox) i try to delete them from their homepage (myflashfetish.com cbox.com) and i erasethem as same as my account, but now tehy keep on appearing and i cannot delete them.. please help!
    www.supernovamagazine.blogspot.com

    ReplyDelete
  57. Not sure if I understood you correctly. It seems you are saying you got some codes from some third party websites and ??? pasted them either in your blog post (meaning main column) or in a HTML/Javascript gadget. Now you have deleted them from the third party websites but the gadgets still remained in your blog. If I understood you correctly then all you have to do is either edit your blog post and remove the codes or if in the sidebar, go to LAYOUT and remove the HTML/Javascript gadget.

    ReplyDelete
  58. Good morning and thank you very much the help, Peter :)

    ReplyDelete
  59. hey even i had the same problem
    i went through all the options above but could not find the solution...
    when i open individual posts, the side bar is in its place but when i got to the homepage, it slips to the bottom.

    finally recollecting all the editing i had done, i removed the jump breaks i had inserted in all my post and voila! sidebar returns!

    hope this will help ppl!
    thank you

    ReplyDelete
  60. Hi I had the same problem and now the solution for my situation. When using the default theme, there isn't a side bar one a single post page. Add at the bottom of the single.php.

    BUT.. now the sidebar is pushed to the bottem of the page. This is because the template still thinks only the post should appear. Again in single.php line 10, change 'widecolumn' to 'narrowcolumn' and voila, my problem was solved :)

    ReplyDelete
  61. Sander, you appear to be an IT savvy person and it will be really great if you can elaborate on your comment because it would be useful for others plus I do not understand fully your comment.

    ReplyDelete
  62. Hi Peter,

    :) thanks but I'm not into IT, I sell tea! But I persistently wanted to find the solution to my problems so I spend hours today trying with result.

    I'm making a blog with the default template of wordpress and had 2 problems. First was the disappearing of the sidebar when selecting a post. The solution was to ad
    at the bottem of 'single.php'.

    But then problem 2 occurred, the sidebar was pushed to the bottem. But only when choosing posts, not when choosing something in the archive or search. After hours I saw something logical on my blog, in combination with reading about adjusting widths on this site. The single post on my blog was looking very wide, so I thought 'of course, there just isn't any room for the sidebar next to the post!'

    So I looked into single.php again and saw that the class on line 10 was on 'widecolumn' while in archive.php and search.php it was on 'narrowcolumn'. So I changed 'widecolumn' to 'narrowcolumn' and it worked :). When reading a post, it appears narrow now and leaves enough space for the sidebar.

    It worked for me!

    ReplyDelete
  63. Congrats to you. For a non-IT person you did very well adapting a Wordpress template for Blogger.

    ReplyDelete
  64. Please help! None of these are working for me.

    my blog is.

    www.vivalanatalie.blogspot.com

    ReplyDelete
  65. none of this are working for me . seriously. i can't see where's my side bar, and when i make a layout that has the side bar, it didn't appear.
    so i might as well want you to explain me.

    http://ceritafitrie2.blogspot.com

    HELP! im making the .. you know, the one layout that dont have any side barz. argh. just look .

    ReplyDelete
  66. I don't see any sidebar at the bottom of your blog so your problem is not the same as the one described in this post.

    You are using this template:
    Blogger Template Style
    Name: Travel
    Designer: Sookhee Lee
    URL: www.plyfly.net
    which is a third party template. Perhaps you should try contacting them.

    Anyway, have you had a look at the LAYOUT and does LAYOUT shows a sidebar? If you, have you added any widget to the sidebar? If you have not, your blog on the web will not show any sidebar. Try adding a sidebar widget (page element or gadget)

    ReplyDelete
  67. Your suggestions are great,but what about those of us who don't know enough about the coding to detect where the problemdownload free pc game is in the template? I, too, am having problems with my sidebar at the bottom and can't get it to go back to the top

    ReplyDelete
  68. Great post.. Thanks

    ReplyDelete
  69. Thanks for your help. Mine was a "too long" link.

    ReplyDelete
  70. thanks you for information ... !!!!

    ReplyDelete
  71. This has been one of the most helpful HTML posts I've read; thank you SO much! My blog is fixed from the horrible problem I had. :)

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications