Sidebar Pushed To The Bottom Of The Page

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

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

A frequent electrical load of bloggers is that the sidebar (profile, links, etc.) is pushed to the bottom of the page. This is a rattling mutual work in addition to may occur when viewed amongst both Firefox in addition to Internet Explorer, or it may last OK amongst Firefox merely non OK amongst Internet Explorer. This is unremarkably caused past times about content such equally photo, tabular array or long link exceeding the width of the content or sidebar column. Sometimes it is caused past times wrong coding such equally missing or mismatched tags. Rat reported that in 1 lawsuit it was caused past times a closing comment tag --> that had no opening comment tag <-- (HTML tags come upwards inwards pairs, opening tag in addition to closing tag). Look for these in addition to right it, in addition to the work should become away. (If you lot desire to familiarise yourself amongst HTML, a skillful house to larn is online at W3schools.)

Other things you lot tin endeavor is to practise about detective work. Think dorsum to what you lot did earlier it happened. Undo that in addition to encounter if that helped.

Another agency to endeavor to solve the work is to modify the width of the content in addition to sidebar (the full width must non last less than the heart of the two). Look for these block of codes

/* Header
----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 car 10px;
border:1px venture #ccc;
}

and

/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}

For the minima template, modify width:660px; to for instance width:800px;

Then hold back for

#main {
width:410px;
float:left;
}
#sidebar {
width:220px;
float:right;
}

and modify the widths to, for example, width:500; in addition to width:270; respectively (note that they full upwards to less than 800).

Preview in addition to encounter if the changes are what you lot want. If so, relieve the template.

Always retrieve to backup your template earlier you lot fiddle amongst it.

The Weblog Handbook: Practical Advice on Creating in addition to Maintaing Your Blog

Share this post