Ekto gammit

WordPress Troubleshooting: What happened to my Sidebar??


This is one of the most common questions asked in the WordPress Support Forum. From "Where did my sidebar go?" to "Why is my sidebar at the bottom of my page?"… 

The most common cause I see is when someone drops a large image (or movie object) into a post. If it's big enough it will push into the sidebar area and the sidebar will 'fall' in it's search for adequate space. This is most obvious when viewing with Internet Explorer because IE does not handle margins and padding the way modern browsers do (see WordPress Troubleshooting: My blog looks horrible in IE!). Possible solutions: Shrink the image. If it's a movie object (hopefully you're not using <embed>) and shrinking isn't an option, try to remove any padding or margins that effect the object. This might even require you to modify your css file, adding a 'class' that removes any inherited padding or margins.

“…never cut and paste from a Word Processor…”

Another cause is poorly written, invalid or malformed code. One unclosed <div> in the right place and suddenly the rest of your page is tumbling out of place. A great method to help diagnose this is to validate (see: WordPress Troubleshooting: I have to validate? Oh MY!!).

In a comment below, HandySolo refers to “Something I’ve seen a lot lately are statements like <div class="foo" />” that wreak havoc on post layout. Be careful how you enter your posts, avoid tables (unless adept with them) and never cut and paste from a Word Processor without first removing all the Word Processor’s formatting:

If you HAVE to post text from a Word Processor, first paste the text into an ascii text editor (like Notepad2, for example [or Simpletext for the Mac?]) to remove the extraneous formatting, then paste into your post…

Some real-world fixes I have had to implement to fix sidebar positioning problems with IE:

  1. Tracked it down to a sidebar widget. The author had a margin-right: 50px; which worked for a sidebar on the right, but this one was on the left. IE took the 50px and added it to the right. Changed it to 0 and the sidebar popped up again.
  2. Had a center positioned image that was close to the width of the post area. IE was adding more margin space (as usual) so in IE it was pushing the post/content out too wide (pushing sidebar off). I added an IE max-width css hack: width:expression(400 + "px"); to the selector #content img.center in my iestyle.css file.
  3. Sometimes adding overflow:hidden; stops elements within the sidebar (or post area) from doing a horizontal ‘bump’.

If you're still not getting anywhere, feel free to go to the WordPress Themes and Templates and ask for help!

Tagged with: , , , ,
Posted in Computers, Things, WordPress
10 comments on “WordPress Troubleshooting: What happened to my Sidebar??
  1. HandySolo says:

    Something I've seen a lot lately are statements like <div class=foo />. Those just seem to wreak havoc. We tend to want to blame them on the wysiwyg editor, but I really don't know that it is that bad! For diagnosis, I usually go to the blog in question and then click titles, one by one, to view them in Single view. That's usually the quickest way to narrow it down to the hosed post. Once I find the post, I'll validate it and see if that turns up anything useful (mismatched tags, for instance). If no posts leap out at me, I'll validate from the main page. If it validates well, or the errors are more semantics than syntax, I might spend a few minutes in View Source and just mentally match up the div tags. It is easy to get a theme hosed up! For instance, editing a sidebar you might forget that the opening div is in another file and add extra divs. Or such silliness (or maybe I'm the only doofus to do that?). 

  2. Juliet says:

    Hi Sam, cool site! I have checked out your sidebar, and I would like to ask where you downloaded your “Translate” plugin, since I would want try to put it in my site, since there is a language barrier with some of my cousins who live in HK 🙂 thanks:)

  3. Sam says:

    Hi Juliet. I got the Translate Widget from Trevor Creech!

  4. Sam says:

    In any modern browser it isn’t ;’)

    But for the few still on IE6 and earlier, I did make an adjustment (few= 4% of my visitors, currently).

  5. JTony says:

    Hi Sam,
    I mentioned this in another comment, but since it actually pertains to this page I thought I’d comment here, too.

    For some reason your sidebar is getting pushed down to the bottom of the page.


  6. JTony says:

    Unfortunately I still have to support IE6 (ugh. stupid, stupid, Microsoft). I’m looking at your site now in IE6.0.29, and your sidebar is still down at the bottom. As I’m having the same problem on my site, I was wondering if you had any further suggestions. Cheers!

  7. Sam says:

    Took a quick look at your css/etc.: I think you have some dimensional issues (page: width=780 then 2 elements that add up to 782px wide).

    But this isn’t as good medium for troubleshooting (comment thread) as: Themes and Templates. Start a thread there with a link to your site…

  8. JTony says:

    Yeah, I never was very good at math. Thanks for pointing that out. I’ll ask any further questions over on Themes and Templates as you suggest.
    Thanks again!

  9. Richard Feliciano says:

    Just dont past text from microsoft word

  10. Richard Feliciano says:

    Just dont paste text from microsoft word

1 Pings/Trackbacks for "WordPress Troubleshooting: What happened to my Sidebar??"
  1. WordPress Troubleshooting: What happened to my Sidebar?? | Sam Devol » Wordpress Suchmaschine says:

    […] WordPress Troubleshooting: What happened to my Sidebar?? | Sam Devol google_ad_client = "pub-1644761693334666"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_type = "text_image"; google_ad_channel = ""; google_color_border = "#000000"; google_color_bg = "#FFFFFF"; google_color_link = "#0000cc"; google_color_text = "#000000"; google_color_url = "#008000"; google_ui_features = "rc:6"; This is one of the most common questions asked in the WordPress Support Forum. From “Where did my sidebar go?” to “Why is my sidebar at the http://samdevol.com/wordpress-troubleshooting-what-happened-to-my-sidebar/ […]

Leave a Reply

Your email address will not be published.