How to avoid blogger sidebar slide or pushed to bottom of content – mystery solved

This is the most common problem with blogger templates that when you add some widget, image or link that do not fit the allocated width, the sidebar is pushed or displayed at the bottom of the main content. This problem mostly occur with Internet explorer (IE) versions.

How to solve this?
One obvious option is to find the culprit in the blog design and eliminate it, by repeatative elimination method, where you take out recently added widgets or section of blog one by one until the problem area is found.
This method is again plague with its own drawbacks like time consuming, not always promisable, etc.

There is one other solution that we recently found, that helped me solve the problem and so should work for you.
Since such cases occur because of overflowing pictures, text, link or widget, we need to take care of this overflowing matter in the blog to not cause problem ever.
So to avoid this overflowing problems, find out style definition of your content and sidebar sections in your blog template (style parameters are usually defined in head section of template), it should be something like this

#content{float:left; width:480px}
#sidebar-right{float:right; width:390px}

This style name may differ across different templates, so one possible option is to lookout for width attribute in this style parameter.

Alright once you found out, then add following attributes to both these style parameters (remember to take backup of your template before going on with change)

word-wrap: break-word; overflow: hidden;

so finally the style parameter looks like below

#content{float:left; width:480px; word-wrap: break-word; overflow: hidden}
#sidebar-right{float:right; width:390px; word-wrap: break-word; overflow: hidden}

That’s it save your template and see the effect. This should work.
Let me know if you still find any problems.

Also check out these related articles:
Get accidently deleted images, pictures back on blogger
Add blogger in-built search to your blog site

0 thoughts on “How to avoid blogger sidebar slide or pushed to bottom of content – mystery solved”

  1. Hello
    Any chance of more specifically where to locate content? Am not locating it in the manner written.

    Had the right side bar fall to bottom once before and increased outer wrapper it is not working this time no matter how wide in IE and Firefox but just fine in AOL. Could not find photos that were too large, nor the offending post(s) as its showing that way for all of them when it didn't use to.
    Thanks much

  2. Hi, these parameters are usually part of your <style> </style> tags, they may not be always with same name as been depicted here. I can see that you said, you changed the outer wrapper earlier, similarly you will find tags for your content and sidebar, where one of the parameter should be width.

    Or let me know your blog or website url, I will go through your site code and help you find the place where you need to insert this.

  3. Hello- I've been trying to figure this out for hours now. I found all the previous answers but can seem to figure out what's going on with these two pages…

    both of the sidebars are not functioning correctly, and on all the other pages the sidebar is fine so it gives me the impression that the problem isn't within the sidebar- but within the page content itself, but I can not for the life of me figure it out!!!! and it's driving me stark raving mad! please help

    I toyed with the widths of the feeds on the widgets page and nothing fixed it.. I just don't get it.

    Hopefully there is a blogger god out there .

  4. I'm having the same issue, but only on my first page. I edited the widths, deleted items that may have been too big or recently added. To no avail.

  5. Hello! I'm also having sidebar issues. I do not believe it's the widget content being too large, because everything looks fine when you click on a specific post. It's only a problem on the first page or "home" page. The sidebars are horribly off-centered. The right one shows up below the posts, and the left one is far, far out of view. (I was able to find it by playing with the overall width/view of the blog.)
    If you can, please take a look and help me out!
    No one seems to have an answer for me! 🙂
    I'd so appreciate your help! Thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top