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:



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.