Sidebar pushed to the bottom of the page

(For an updated version of this post, go to Sidebar slide to the bottom of the page: What to do?

For an example of how I go about trying to solve this problem, go to Trouble shooting sidebar sliding to the bottom of the page problem. An example)

A frequent complaint of bloggers is that the sidebar (profile, links, etc.) is pushed to the bottom of the page. This is a very common problem and may occur when viewed with both Firefox and Internet Explorer, or it may be OK with Firefox but not OK with Internet Explorer. This is usually caused by some content such as photo, table or long link exceeding the width of the content or sidebar column. Sometimes it is caused by incorrect coding such as missing or mismatched tags. Rat reported that once it was caused by a closing comment tag –> that had no opening comment tag <– (HTML tags come in pairs, opening tag and closing tag). Look for these and correct it, and the problem should go away. (If you want to familiarise yourself with HTML, a good place to learn is online at W3schools.)

Other things you can try is to do some detective work. Think back to what you did before it happened. Undo that and see if that helped.

Another way to try to solve the problem is to change the width of the content and sidebar (the total width must not be less than the sum of the two). Look for these block of codes

/* Header
———————————————– */
@media all {

header {

width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
}

and

/* Content
———————————————– */
@media all {

Table of Contents

content {

width:660px;
margin:0 auto;
padding:0;
text-align:left;
}

For the minima template, change width:660px; to for example width:800px;

Then look for

main {

width:410px;
float:left;
}

sidebar {

width:220px;
float:right;
}

and change the widths to, for example, width:500; and width:270; respectively (note that they total up to less than 800).

Preview and see if the changes are what you want. If so, save the template.

Always remember to backup your template before you fiddle with it.

Leave a Comment

Your email address will not be published.