Sidebar drops down !

on October 13th, 2006 | Filed under Common Theme Issues, WordPress Tips

Lets take a look at one of the most common problems with the wordpress sites.

The sidebar does not stay on the side, and it falls down to be below the content area.

and the thing is, it is not consistently doing so. Sometimes it is just happening in IE and sometimes it happens only on certain posts or only on homepage.

Here are the list of things you can do to fix that.

Step 1. Validate !
This is the most common cause for this issue. Try to validate the page that has this issue, at W3C’s Validator.
Once you fix the issues found by the validator, Refresh the page and see if the problem is gone.
If not, go to step 2.

Step 2. Check your Images Width
The next cause could be, your images are wider than the ‘main content’ div (usually #content in most of the themes).
If it is OK, try to resize the image to fit within the content DIV.
May be, you can give a smaller size image on the page, and the full-size image can be hyperlinked to that small image. This also helps in faster loading of your page.

If the problem persists, go to Step 3.

Step 3. Reduce the size of the ‘Content Area’

You can open up your style.css and look for the ‘width’ definitions for #content and/or #sidebar.
Try to reduce the width by 5px or 10px or 15px or 20px or 25px till you get things right.
(Most Layouts will still look good, after reducing the width by this method.)

Most cases would be solved by now. (If you guys have any other suggestions, please let me know).
Thats all for now, folks !

45 Comments

45 Responses to “Sidebar drops down !”

  1. JunCTion says:

    Thanks Sadish, step 3 seems to have fixed it for me…I took 5px off the width of the sidebar and that seems to have done it! Thanks

  2. 主題側邊欄錯位的幾個因素…

    ……

  3. Sadish, I tried everything you suggested, but it just didn’t work. Finally, out of frustration I did the only thing I had not tried. Yes I trashed everything and reinstalled WordPress, then uploaded the Aquafluid theme again. And now it looks fine. Mystery to me !

  4. Damon says:

    Mokhsein, I believe that the easier way to deal with the problem is to not direct-link any image bigger than 520px wide. Upload it to your WP directory, use the thumbnail, and link it to the image. That pulled mine back into it’s proper position.

  5. Leah says:

    having this problem with aquagreen and aquafluid. There are no images present and have played around with different content and sidebar widths but still cant get the sidebar where it is supposed to be. Did the validation thing and it didnt show any problems so I am kind of stuck. Any ideas that an amateur might be able to try. Even though it passed validation, there might be a problem with one of the posts because I edited the category on a few of them, and the sidebar suddenly dropped. Did not edit text, just category.
    thanks Leah

  6. Rich says:

    Yep, good one;)

    I didn’t need it this time but “step 3” was needed to fix issues in IE with my K1 template. Thanks

  7. Pepper says:

    Hi,
    I have the same problem as Leah…I tried all 3 steps but still my side bar drops to the bottom of the page.
    Please help!

  8. Sadish says:

    Pepper.

    look at the way your footer looks.
    compare it to http://themes.wordpress.net/testrun/?wptheme=795

    There is something you added, thats causing the problem.
    Sadish

  9. Deirdre says:

    I seem to be having the same problem – one post it was fine the next everything dropped, I’ve changed the widths, made photos smaller, etc.

    I love the template, but it is so much more funtional when the sidebar is on the side.

    Thanks in advance.
    😀 eirdre

  10. prairieon says:

    I have been searching around trying to fix this very problem since I installed this theme. I have replaced all ‘s with ‘s and this seems to solve the problem. I wish I could figure out what makes the default so that this would just happen automatically. Anyway, this is a ‘messy’ workaround that works 100% of the time for me.

  11. prairieon says:

    This should read that I replaced all div’s with p’s in the html tags.

  12. Moka says:

    I’m using CRAYONWORLD theme.

    I noticed the “drop down sidebar” problem while showing SEARCH RESULTS. I tried the above 3 tips and It didn’t work out for me. Then I look into the search.php template and saw the “2” in

    Just took out the number “2” from container and content and the layout is presentable ! 😉

    Thank Sadish for this theme !

  13. Todd says:

    I have a small headache, but I may have found a fix for YouTube and WordPress or at least it worked for me. It is a plugin that can be found at http://www.paulbain.co.uk/simple-youtube-plugin-for-wordpress-easytube/

    It let me embed a YouTube video without the sidemenu dropping down.

    Todd

  14. marc says:

    I have attempted to solve the sidebar location problem utilizing all three suggestions noted above with no luck.

    I have even located someone using the theme that displays the sidebar in the correct position.

    I have deactivated all plugins and that has not cured the problem either, the sidebar drops down on the index page and individual posts in IE6 and on individual posts in Firefox.

    Any suggestions would be appreciated.

  15. jt says:

    how do you fix validator problems in the wordpress admin panel? I can’t see the raw code.

  16. Shawn says:

    I’m very much the novice when it comes to HTML coding, but sad to say I know enough to be dangerous 🙁

    I’m showing 154 validation errors. I’ve printed them out so I can go thru things one at a time. I added a Google search bar to the header (took it out), and put in a table on my side bar (put into a widget instead of template). Everything should be back to the way it was, but my sidebar is still at the bottom 🙁

    I widened the sidebar to 300 in the stylesheet.

    So many things to check, any help would be appreciated.

    Thanks!
    Shawn

  17. vineet says:

    hi.

    i am shifting to wordpress. the problem i am facing is that, normally the posts appear properly. but when more number of posts are displayed in the page, the side bar goes to the bottom of the page.

    this does not happen all the time. but only when there are a lot of posts to be displayed

    vinni

  18. Lori says:

    Hi!

    I tried all of your suggestions, but no luck. My archives page sidebar still falls to the bottom. do you have any other suggestions? Thanks!

    http://www.juxtaexposed.com/archives

  19. Sadish says:

    Lori,
    I think you should contact the theme author at this time.

  20. Albert says:

    Hi Sadish,

    I have try those three steps that you suggest but it didn’t work. Last few days it was ok and suddenly the sidebar just drops down out of nowhere. Please give me some advice on how to fix it. Thanks

  21. Brian says:

    My sidebar drops to the bottom, but only on the individual posts page. On the home page it stays where it is supposed to. I’m not sure what happened, but it is very frustrating. I know it is not due to image size or the content size.

  22. […] For more reference see this WordPress support thread, as well as this page with diagnosis and solution. […]

  23. such says:

    I found that adding “overflow: hidden” to both the sidebar and content-main definitions in main.css worked to fix this in IE.

  24. recordmymind says:

    Hi, I have this problem but have no idea how to fix it. Can someone take a look at recordmymind.com/blog and suggest what I should do? I need step by step instructions because I’m not savvy with code at all.

    Many thanks.

  25. drt says:

    I’ve validated and it passed. One thing I notice from the page is that, the gif animation picture size changed from 150 x 250 to 164 x 264. Seems like IE ignore the width inside img tag. Is that true, Sadish.

    http://28oktober.net/2008/06/15/masih-tentang-rina-fitria/

  26. drt says:

    I still don’t understand why the IE doesn’t recognize the width and height and added some 14 pixels to each image, but after reducing the content-main width from 520 to 500, it works now. Thanks Sadish for great template.

  27. […] kok gak nemuin caranya balikin, maklum masih newbie. Akhirnya coba googling ketemu petunjuknya  disini. Wah tetap gak bisa juga. Tapi intinya ada ukuran image atau posting kita yang kebesaran. Akhirnya […]

  28. Jim says:

    Sadish,

    I’ve tried a couple of different fixes, including (http://wprocks.com/wordpress-tips/floating-images-within-the-post-in-wordpress-26/) and I still can’t get my sidebar back where it belongs. It drops right to the bottom. I’m using Paalam.

    I’ve fiddled around with the width in here:
    /* Content */

    #content {
    float: right;
    width: 640px;
    padding:10px;
    }
    /* Column Two */

    #sidebar {
    float: left;
    width: 205px;
    padding: 10px;
    font-size:0.9em;
    margin:5px;
    }

    Any suggestions?

  29. Jimmy says:

    The problem for me was that I had copy/pasted some html over from blogger.com and it seemed to have over-ridden something in the template. After doing steps 1,2 and 3 above, I then went on to unpublish each post one by one until the culprit was found. Then I removed all formatting and all pictures from the guilty post and rebuilt it. Now everything is fine.

  30. Omri Ariav says:

    Step 1 Worked for me. Moved the word-copied text to the notepad and then repasted it on wordpress. sidebar stayed as it should.

    thanks.

  31. Matthew Whitworth says:

    I’ve noticed that my wife’s site that uses Misty Look (3.7.2) has the dropping sidebar problem, but only when I wasn’t logged in. W3 Validator complained that there was a missing closed element. That led me to believe that there was a conditional bug in the PHP. Sure enough, the tag terminates inside an if/else/endif conditional.

    To fix this, move the from comments.php line 86 to between the two endif’s at the end of the file.

    If there is a standard way to submit a patch to Sadish, please let me know.

  32. Mauricio says:

    Hi,

    I have this strange problem with the sidebar, One I have checked the “Users must be logged in order to comment” the comment form just disappear (as usual) but then, my side bar felt down under the content. I go and uncheck the option and, the sidebar goes fine again. It seems that for some reason, page.php layout change for some reason, at least this is what firebug says to me. Any suggestions?

    Mauricio

  33. Lea says:

    Hi,

    I am having this problem too.
    How can I fix it if I can’t pay for the CSS thing on wordpress? I am not able to edit my CSS unless I have paid money, I believe, so I don’t know what to do. =(

    Lea

  34. Katya says:

    Thanks! I had this problem with ie6. Now it works with 3d step.

  35. Heyman says:

    Nice Topic here! Thanks!

    I would like to add a situation:

    I use the plugin “thumbnail For Excerpts” I found out that with certain image files like gif and png the sidebar also slides down!

    I hope someone will find this use full.
    Cheers
    Heyman

  36. My Business says:

    W3 shows 3 errors..

    How can I exactly Fix there?

    Where do I need to change the code?

  37. very thanks .Third step workout for me…..I adjust 5x in content & sidebar.I fix it….

  38. whiteyandles says:

    hi,

    i too have gone through all 3 steps, but without success. the odd thing is the sidebar has been fine for months, then all of a sudden it dropped down without me even adding a post or altering anything else. any advice??

    thanks in advance.

  39. shoaib says:

    thnx a lot Sadish ,i was having problems with the images and it worked out like charm for me.

  40. MahjongGuru says:

    Thanks a lot. I was having this problem on 2 of my websites… just missed a closing tag 🙂 You saved me, thanks again!

  41. Kelvin says:

    Thanks a lot… one of my image in my post was wider than the content area, adjusted and its fine now…! Cheers!

Leave a Reply