Help! My sidebar is at the bottom

For non-techies: What is a sidebar? It is the column located at the right or left side of your site. It holds your widgets such as categories, latest post, and a lot more.

Problem Description: Your sidebar is gone and found out that it’s pushed at the bottom of the page.

Why is this happening? There are several reasons why it’s happening:

Reason 1: There might be deleted codes in your sidebar.php. It happened to me before. I think I had a problem with my mouse and then the codes or texts are highlighted automatically. And when I click on it, the codes get deleted. Another factor for incomplete code is when you upload the sidebar.php via FTP. Sometimes you get disconnected in the middle of uploading the file. When this happens, the codes will be just half complete.

Solution: The easiest way is copy your current sidebar.php and save it somewhere (let‘s say mysidebar.php). Then open the raw or untouched sidebar.php (i.e. if you’ve kept an original copy before editing it). Copy and paste all of the codes over to the current sidebar.php. Now open your saved code (mysidebar.php) and only get the codes you have changed. Copy the codes carefully over to the current sidebar.php. Save and upload.

Reason 2: Unclosed tags. I think this is a common coding problem; we are just humans after all.

Solution: Check your codes, there might be missing close tags for your paragraph(s), table(s) and div(s). If there are no missing closing tags, try to experiment. Add (or remove) a closing div tag at the first line of your sidebar.php code.

Reason 3: Wrong position of closing tags. This problem is somewhat related to reason 2. There are closing tags but your coding position is just wrong. For example your code goes:

It should end with:

And not the other way around. Just think of “First in, last out.”.

Reason 4: Poor CSS. We can’t avoid it but sometimes some themes are poorly coded. It might look good in Firefox but not in IE or other browsers. If the above solutions did not work then we go to our style.css file.

Solution: First, check what class or id is your sidebar.php using? How to know it? Well, just open your sidebar.php and check the first div. It should say something div class=”sidebar. The red text is the name of the class. Now find it on your style.css, you can use find & replace. Take note that a class starts with a period (.) and id starts with a number sign (#). Check the css code of the class/id. And add the one of the codes. For right sidebar:

For left sidebar:

Alternately, you can also try adding the float codes directly to the div of your sidebar.php


About freelance webmasters

We a re a group of webmasters designing professional facebook pages, twitter, youtube and wordpress sites at affordable prices. View all posts by freelance webmasters

7 responses to “Help! My sidebar is at the bottom

  • The Serge

    Thanks for posting a comment on my blog post with a link to this more detailed article. The issue I was discussing at:
    is different than the solutions you presented though. The closest it might fall under is reson 2 but the case I’m talking about shows which is, according to the XML specifications and the /> at the end, a valid and properly closed XML tag. Also this tag was not placed by myself manually, it was placed there by the wysiwyg editor. Removing these extra tags placed by the editor fixed my issue.

    Hope this helps your readers.
    The Serge

  • freelance webmasters

    Thanks for your comment. It reminds me… When creating a page/post we must not copy and paste from MS word to WYSIWYG editor. Why? its because by doing so would give a lot of garbage or unwanted codes that might give some problems.

  • The Serge

    That is great advice. Copying from MS Word has been the biggest problem we have had to deal with at one of my client’s projects when we were extending the YUI based wysiwyg editor.

  • Vincent

    Thank you so much! This was just what needed to undo a mistake i didn’t even realize I had made! Thank you!

  • toronto social media consultant

    Hi, This was great – the only instructions online that worked for me.

    Follow the first step and add a closing div at the start of your sidebar.php file and that should solve it 90% of the time.

    Thanks again, you Rock!
    Patrick Wagner

  • Arzu

    Actually, I had a similar problem with our website just today. It turns out it had to do with “div”. I checked the first post featured on the blog and it had two closing “div” tags. So I just added two closing “div” tags to the second post that was featured. And the problem was fixed. Thanks again for the tips!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: