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.
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:
- 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 the50px
and added it to the right. Changed it to0
and the sidebar popped up again. - 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. - 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!
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?).
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:)
Hi Juliet. I got the Translate Widget from Trevor Creech!
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).
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.
Cheers!
-T
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!
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…
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!
Just dont past text from microsoft word
Just dont paste text from microsoft word