Friday, November 02, 2007

Trouble shoot sidebar slide to bottom of page problem: An example

I have previously published two posts on the "sidebar slide to bottom of page" problem at Sidebar pushed to bottom of page: What to do? and Trouble shooting sidebar sliding to bottom of page problem (click BACK button to get back to this page). Problems like this are most frequent in Internet Explorer, but while they may not cause the sidebar to slide to the bottom of the page with other browsers like FireFox, they can cause other problems.

A blog reader recently asked for assistance for this problem and I thought it would be good to use his problem on how to go about solving the problem. His sidebar is at the moment at the bottom of the page and here is a screenshot of the cause of the problem:

cause of sidebar sliding to bottom of page

I have used the red error to show where his sidebar end, and the screenshot clearly shows the width of the "Favorite Songs" far exceeding the sidebar width. If I have access to his Blogger account, I will open the Page Element (widget) that had been added to display that "Favorite Songs" and also open the template editor to check what is the exact width of the sidebar. See How to find the width of the blog Header, main column (posts) and sidebar (click BACK button to get back to this page).


However, I have no access to his Blogger account, so I have to do the next best thing, that is, click VIEW > PAGE SOURCE in the menu bar at the top of the browser while at his blog. This is what the page source revealed:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px
color: #1c4676;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
}

The part in red tells me that the width of his sidebar is 268 pixels. Further down the page source is this script which is used to display the "Favorite Songs"

<h2 class="sidebar-title">FAVOURITE SONGS</h2>

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player-othersite.swf?config=http://www.profileplaylist.net/mc/config/config_blue.xml&mywidth=435&myheight=270&playlist_url=http://www.profileplaylist.net/loadplaylist.php?playlist=18021445" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><BR><a href=http://www.profileplaylist.net><img src=http://www.profileplaylist.net/mc/images/create_blue.jpg border=0></a><a href=http://www.profileplaylist.net/standalone/18021445 target=_blank><img src=http://www.profileplaylist.net/mc/images/launch_blue.jpg border=0></a><a href=http://www.profileplaylist.net/download/18021445><img src=http://www.profileplaylist.net/mc/images/get_blue.jpg border=0></a> </div>


There are 4 widths there highlighted in red (you will scroll horizontally to see the hidden one) and the problem here is I don't know which width to change. I would probably first leave the first one alone, and change the width of the other 3 so that it is equal or less than 268. If that still don't work, I will change the first width as well.

So now, all I can do is to refer that blogger to this post and hope he can solve his problem. As for you, I hope you have learned something about how go about solving similar problems.

Update 17 September 2010: A reader solved her "sidebar at the bottom" problem by reducing the number of posts in the homepage from 25 posts to 10. Each of those 15 posts was published individually (permalink) and was found to not have caused the sidebar to slide to the bottom. Thus the possibility of content in one or more of those 15 posts causing the sidebar at bottom of page problem was eliminated.

If you have many posts in your homepage and your sidebar is at the bottom of the page, you may want to try having less posts on your homepage.

27 comments:

  1. I set mine at 120 width

    ReplyDelete
  2. I have a similar problem. I cannot fix it and I do not want to change my layout since I have worked on it for some days. While using Internet Explorer, you cannot see my right sidebar because it´s at the bottom of the page. Moreover, the page is far too to the left as you might see. I would like to know if you could help me find a way to solve this.

    Thanks in advance.

    http://dailyflava.blogspot.com

    ReplyDelete
  3. Hi DailyFlava (woman?),

    I am afraid you will have to try to use information from this post and also from What to do - sidebar slide to bottom of page and Sidebar is pushed to the bottom of the page (with link to blogger tricks version) as a guide.

    Most likely cause is too wide photo, music or video player, etc.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  4. I have a problem and have been searching everywhere to get an answer.
    My blog shows up great in Firefox but on Internet Explorer the entire right side bar is missing.

    When i am in edit and go to preview I get a error saying IE cannot open and will abort the operation.
    My blog is bajarealestateblog.blogspot.com

    Any suggestions. Please keep in mind I am pretty lame on the html code. Desperate to fix this.

    ReplyDelete
  5. Hi Admin,

    Most likely your sidebar is not missing but have slid down to the bottom of the page. Try the trouble shooting tips in this post

    ReplyDelete
  6. I've been researching what to do about this sidebar problem for a few a while now. a few weeks ago, i tried using an "over the rainbow" layout that I've since seen in many template sites. After setting in this layout and relizing I didn't like it, I reverted back to classic and since have had a problem with my sidebar being at the bottom. I've check it this on four different computers now that use either internet explorer or firefox. I'm finding that it's still happening in all browsers on any server. I've checked my html text, openings and closings, and even tried changing the widths. I don't have any photos or links that would excede my width space. I'm really confused?! I know you get this a lot, but I would really appreciate some advice.

    ReplyDelete
  7. Hi,

    I am using a custom layout and my problem is a little different than everyone else's. My sidebar stays on the right side, but 1 of my 2 widgets slides to the bottom of the page. I have 2 widgets -- 1 stays where it's supposed to on the right, and the other slides to the bottom. I figure there must be something wrong with the coding of the layout, and I've played around with it but I haven't been able to figure it out.

    If you still check this (I notice these comments are a few months old) could you look at my blog and let me know if you can figure it out?

    Thanks! :

    http://simplybeautifulthings.blogspot.com/

    ReplyDelete
  8. I realize this thread is a couple years old but I am perplexed, even after reading all of the posts. My blog shows up fine in Chrome and Firefox, but in Internet Exploder (misspelled on purpose, grr), the sidebar is at the bottom ONLY on the home page. I had placed scrolling images of link partners in the sidebar and one of the images was a bit too wide, so I deleted the html for that entire thing. Not sure if that was the problem.

    Any help would be greatly appreciated. By the way you have a terrific resource here! I've searched and searched and looked at CSS validating tools - but it's like reading Martian language to me.

    My blog http://paganbydesign.blogspot.com

    Polly

    ReplyDelete
  9. Nevermind, I figured it out quite by accident for the blog located at http://paganbydesign.blogspot.com

    I simply went through to display my most recent posts in new pages, one at a time. It appears that if I place the "more" tag too close to the top of a post, it shoves the sidebar to the bottom. There was only this one post where the sidebar showed up like it does on the homepage (at the bottom). As soon as I removed the tag, all is well.

    ReplyDelete
  10. Apparently what used to cause sidebar at bottom hardly arises nowadays but I too have a puzzle I can't solve. When I view this Damansara Uptown Directory I encounter no problem, but when I view it in a computer at a bank which have its server, only the posts (main column) are at the top, everything else is at the bottom. Although the browser at the bank looks to me definitely to be not IE7, my Statcounter statistics said the visit is from Hong Kong and is IE7 although I am definitely not physically at HK and viewing with IE7 with my own computer gives no problem. The bank had disabled lots of things including checking Internet Options to find out what I am dealing with.

    What IE version are you using, and what do you see when you view Damansara Uptown Directory?

    ReplyDelete
  11. Sorry, erratta, should read Menu bar Help > About Internet Explorer (to find version)

    Anyway I viewed your blog with IE7 and all the sidebars are where they should be.

    ReplyDelete
  12. hey peter, my blogspot in trouble too. Currently, i changed my blogspot template. After i changed, the layout was displace. All the side bar was displaced to the bottom of post. But, the weirdest is when i turn into another page, mean's order post, the layout is as perfectly as what i set, mean the problems is just happened at home page.
    Here is my adds: http://www.shandow-z.blogspot.com/
    Did you have idea how to fix the problem ?

    ReplyDelete
  13. Try saving all posts on homepage as draft, then republishing it one by one and try to pinpoint which post is causing the problem

    ReplyDelete
  14. Hi, Here´s my issue, I am using the best video template for blogger called BTube Advantage. because it isnt limited to only YouTube. Problem is the designer hasnt updated this template so when I place a new post on the top link called North America (http://latincoast.blogspot.com) it pushes the right sidebar to the bottom. Its only the top North America label that pushes it, the other labels dont do this and I made a test blog to prove it http://lissyytony.blogspot.com. Its important to note that when I place a new post on the top label North America or even on the sample blog, all the blog posts and the blog content disappear completely after clicking any link or post. Please assist me or let me know what I can do to solve this thanks so much.

    ReplyDelete
  15. Sorry I don't use BTube Advantage template so I can't help you.

    ReplyDelete
  16. Well now, looks like a have to unfollow you, but thanks anyway

    ReplyDelete
  17. Can you please help me? I have been trying for hours using these guides and other sites to try to fix my sidebar sliding (in 2 of 6 pages) and can not for the life of me figure it out. I am using blogger (simple design) I tried to resize the widgets, didn't work. I tried to see if certain things within the posts were just do wide, didn't seem to help. I can not for the life of me figure out what it is. Please help.

    http://www.disaster-girl.com/p/widgets.html
    http://www.disaster-girl.com/p/news.html

    I do believe each page may have separate issues, or really, I don't know.
    PLEASE HELP :)

    ReplyDelete
  18. Try saving all your posts in the homepage as draft then publishing them one by one and each time checking to see if the sidebar is where it should be. This is to narrow down to which post is causing the problem

    ReplyDelete
  19. Also check the posts in this search engine result page - sidebar at bottom of page

    ReplyDelete
  20. Hello,

    I'm having the same type of problem with my Blog ( http://gypscoprotheres.blogspot.com )

    My problem is that it only happens when I use the computer at my job. I've tried different browsers (MF, IE, Chrome) and different resolutions. I've checked every single post for HTML errors and even tried an empty post.

    I've tried the sidebar without widgets and even then it drops to the bottom.

    When I open Layout Template designer, The sidebar is also at the bottom (I'm talking about the designer where you can chose different layouts and change the place of your sidebar)

    I've tried a different width of the sidebar and the main.

    I'm out of options. The only thing I've changed is horizontal autospread of the background, but even when I undo this, I keep on heaving the same problem.

    Can someone please help me out? Like I've said, I only have this problem when I use the computer at my job. I have no idea if others also see my sidebar at the bottom.

    Greetings

    ReplyDelete
  21. I viewed your blog using Firefox and there is no problem, your sidebar is right where it should be.

    ReplyDelete
  22. This problem only occurs at my job. I've tried different resolutions there and also updated all the browsers there.

    If my job is the only place where my Blog doesn't appear right, it's not a big problem of course. =)

    Thank you for checking it.

    ReplyDelete
  23. By the way; this page shows the same problem at my job. So probably the problem is there.

    ReplyDelete
  24. a few months ago I had made ​​dizzy because of sidebar on my blog can not slide. is there a part of the script is broken.

    ReplyDelete
  25. Do you have a solution to this problem that is similar to this post.
    I will try to explain it the best I can.

    I accidentally moved the blog post section of the gadgets while rearranging my gadgets.
    Now it is overlapping all of the gadgets next to it
    and I am unable to place any gadgets in that section.

    ReplyDelete
  26. Maybe change template? After you have done backup of course

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics