WordPress Blog Sidebar Drops Down Problem – Solution

By | February 12, 2009

image

WordPress themes are for sure a good delight for eyes , but they look equally odd when some components change their position even though you did not touched any theme file, well the same case happened with me actually it was the case with one of my blog where on the index page the right sidebar would drop down, while on the single post page it was all right Now that made me go mad ,as i checked through all my CSS and template files and every DIV tag was closed sidebar was included at proper place and so on, but there was no solution the sidebar was still DOWN.

I still cant believe that this problem had a very simple solution , just go to your WordPress Dashboard then to Settings->Writing-> and select the checkbox that says “WordPress should correct invalidly nested XHTML automatically” as shown in the figure below ,

image

Do this and your problem will be solved Ok, happy now !!

Now, the technical side of this solution is that due to some plugins  or auto formatted copy paste content etc. our Post HTML contains somewhere a closing div tag like </div> without a matching opening DIV tag, what this does is that it prematurely closes the content Div and so sidebar falls down.

Also, Sidebar drops sometimes due to extra width of the content ID or class, so check your stylesheet as to if the width of content column +width of sidebar is less than the tootal width of containing column ie. the wrapper or the body selector.

Anyways , hope that helped

13 thoughts on “WordPress Blog Sidebar Drops Down Problem – Solution

  1. Andres

    ¡¡Owwhh! Thank you very much! I had this problem (now fixed) You are the master.

  2. Hanlie

    I tried that, but it didn’t work… My readers assure me that it appears normal to them and it’s normal on my laptop, but not on my new desktop computer. So it has to have something to do with the setup of my computer, but I can’t figure out what! Any ideas?

  3. Vivek

    @Marcus I visited your pages and they seem fine in Firefox, Opera and Safari

  4. Vivek

    @Hanlie It also happens due to the IE 6 border box model and concept of box width etc. so if you are using Internet explorer 6 then that may be the problem, also check your stylesheet so that width of content + sidebar is less than the wrapper width or the body container width .

  5. Dr H.

    Unbelievable… truly unbelievable… I’ve been at this for 3.5hrs trying to figure it out, even installed different themes and nothing. I can’t believe it was this simple…. FANTASTIC POST!

    Thanks for saving me hours of coding!

    Dr. H

  6. Lukes

    Thanx for the info. But which stylesheet am i need to look into, as I still have this problem!
    Help will be appreciated. 🙂

  7. Vivek

    You dont need to look into any stylesheet, you just have to change that setting as told in the post, or manually check for any unclosed divs etc.

  8. Marcus Thompson

    Actually, my work computer is using IE 6. Not only does it mess up my WP blog, but my Facebook page as well. When I’m home and using Firefox I have no problems.

  9. Vivek

    Well that is due to CSS problems with ie6 – perhaps some issue with the margin and borders of your Blog’s stylesheet , I can fix that for you for a small fee If you want .

  10. Rennie

    Ive had this problem for so long and havnt been able to figure it out. checked the box per your instructions and still nothing. I took a peek in the stylesheet and there are a couple places that have “div” but Im not sure what it means to “close the tag”. There is even one place that has “div div”, right next to each other. any help would be mich appreciated 🙂

    my blog: renniesolis.wordpress.com

Leave a Reply

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