This post is about making a change to your WordPress site and leaving an div tag open…and finding out that it screws up the layout of your website or blog….often pushing the sidebar down to the footer of the page where WordPress is concerned.
So, you have installed WordPress, found a theme that ticks most of the boxes and has most of the features that you are after for your blog or website.
You have got the site into shape, you have some content up, you have allowed it to be found by search engines…..you are pretty much ready for the world.
There are just a few things that you want to do in order to add some personal touches that involve opening the WordPress Editor (Appearance > Editor). Maybe you wanted to add something to the footer of all your posts, maybe you wanted to change the sidebar….whatever it was it involved you making a minor tweak to the code of your website. Maybe you just tried to add a piece of code to one of your posts and didn’t even open the WordPress Editor at all.
Anyway, you made your changes and hit ‘save’ or ‘publish’.
You go back you admire your work but…….crap, the whole website is screwed up. What happened?
WTF! My WordPress sidebar has fallen to the footer of the site?:
I have done this many times – made a quick change to a blog (usually late at night when I don’t have the time, will, or energy to subsequently fix it) and found that I have f**ked something up.
One of my common issues is making a change and then finding that my WordPress sidebar is no longer where it should be, and has fallen down to the bottom of the website, so it is now found below the footer.
This can be caused by a few things – one common example is trying to insert an image into a post that is too large. For example, trying to force a 2000px image into a post with a fixed width of 600px means that something will break – usually your template.
My most common error is leaving an open div tag in a post or in the actual theme after using the WordPress Editor.
Check the screenshot below to see an example of an unclosed div tag:
Everytime my Sidebar slides down the page it is 99% of the time caused by an unclosed div tag.
So how do you fix it?:
Finding an unclosed tag can be a pain, especially if you don’t really remember when you might have introduced the issue. You can either wade through your html/markup looking for errors, or you can make your life easier by using some free automated tools to do the job for you.
There are a few tools that I use to check for unclosed div tags, in fact, it is good practice to use these tools for checking your site for any markup errors and to ensure that your code/markup is valid.
The DIV Checker (http://www.tormus.com/tools/div_checker)
A simple, and free tool for checking your div tags. If you want to ensure that every div tag in your website has a corresponding closing tag, then simply enter your url, click ‘go’ and you will get a simple report back of any issues with your div tags. This tool has saved me multiple times in the past.
The W3C Mark-Up Validator (http://validator.w3.org/):
This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML – simply enter the url of your website into the site, press a button – and you get a list of any invalid markup that you should be fixing.
Running a check on your site using The W3C Mark-Up Validator is awesome, but if your site is complex, then it might still be tricky to find an unclosed div tag, so if that is the case then use the first link above to locate the div.