Friday, January 12, 2007

Why Is My Sidebar At The Bottom Of My Blog?

I've seen a lot of blogs with this problem as I suspect many of you have too. The problem is the left or right sidebar of the blog falls down below the main posting column. You might be wondering why and how this could happen?

Well, the problem is usually caused by one of two different things:

1) A picture that is too big being added to a post or to the sidebar itself. Or,
2) A URL was added to a post or to the sidebar that is too long which means the font size of the URL is too large.

The most common culprit of this problem is that a picture will be added to a post that is TOO BIG for the width of the main posting column or a picture is added to the sidebar itself that is TOO BIG for the width of the sidebar. When this happens the sidebar of the blog will fall down to the bottom of the blog.

What you need to do is to reduce the size of the picture in the post or in the sidebar. Usually by cutting the picture size in half that will be enough to solve the problem. If it doesn't then you may need to reduce the picture size further.

If the culprit is a URL that it too long then re-format the long URL to a small or tiny font.

So, how do you find the culprit. It's actually easier than you think. To find the culprit look for the post that is wider than your main posting column. You can usually see this by the sidelines and extended color of your main posting column.

When you find the post go back in and correct it then re-publish the post.

If it doesn't clear up the problem then either you need to reduce it further or you have another post that is also causing a problem.

Sometimes it might be the alignment of the picture that is causing the problem especially if a larger picture is "centered." Changing the alignment to "left" sometimes can resolve the issue without your having to resize the picture.

The same holds true for the sidebar. If it's a picture that is too wide for the sidebar here, too, you can usually see this by the sidelines and extended color of the sidebar column. Re-size the picture and it should solve the problem.

You can adjust the width of your blog columns but you have to do it within the template. Here you need to find the code for the overall width of the blog, the main posting column width, and the sidebar width.

Reducing the size of the pictures or changing the font is a lot easier than playing around with the template if you're not really familiar with HTML code. However, you can change the width of your blog and each respective column width and then preview your blog before saving the template.

To do so you need to look for the the HTML code for the page structure. And then look for the HTML code for the overall blog section, the main posting section and the sidebar section. Within each section will be HTML coding concerning width that will say something like this: width:740px;

For example, your coding might look like this:

/* Page Structure
----------------------------------------------- */
#outer-wrapper {
width:740px;

margin:0 auto;
text-align:left;
font: $bodyFont;
}
#main-wrap1 {
width:480px;

float:left;
background:$mainBgColor
margin:15px 0 0;
padding:0 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;

#sidebar-wrap {
width:240px;

float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;

In the above example the overall blog width is 740px. The main posting section is 480px and the sidebar is 240px. If you add the main posting section and the sidebar together it equals 720px. You don't want it to equal the overall width of the blog or 740px as you want to leave room between the main posting column and the sidebar column. In this case you're leaving 20px.

So, let's say you want to change the width of your main posting section by let's say 50px. You would add 50px to the overall blog width to make it 790px and add 50px to the main posting width to make it 530px.

Or, let's say you want to add a little to the main posting width and a little to the sidebar posting width. Let's say you want to add 60px to your blog with 30 being added to the main posting width and 30 being added to the sidebar width. First start by adding 60 to the overall blog width to make it 800px. By adding 30 to the main posting width it would become 510px and by adding 30 to the sidebar width it would become 270px. The two now add up to 780px which is still smaller than the overall blog width of 800px so you're still okay for spacing between the two columns.

If you are going to fool around with the template just make sure that you always have a full back-up copy of your template stored somewhere in case you need it. And, always work in preview mode until you are sure that you like your changes. When you're happy with the column widths and they look okay in the preview then you should save it.

I hope this helps all of you who may be having the "Why Is My Sidebar At The Bottom Of My Blog?" problem.

Copyright © 2007 - All Rights Reserved - Written By Linda Walsh of Linda Walsh Originals, Linda Walsh Originals E-Patterns, and Linda's Blog. Linda is a doll maker and doll pattern designer. http://lindawalshoriginals.com

1 comment:

Rogers Market said...

Nice pages here. Great information. Will visit again and recommend.

Post a Comment