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 the
50pxand added it to the right. Changed it to
0and 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.centerin 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!