Tag Archives: sidebar fix

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


%d bloggers like this: