Lining up the first post and the sidebar

In some Blogger templates, there is a big gap between the bottom of the header and the start of the first post, and this means that the posts and the sidebar are not aligned. This article explains how to adjust the gap, and so remove that problem.

Blogger template layouts

In the templates that Blogger provides, as well as all third-party templates, the amount of space between elements on the screen is not accidental: designers put a lot of effort into working out what spacing will look good, and then finding ways to put CSS code into the template so that the spacing they want is shown in any browser software that Blogger supports.

But there are times when you may want to change this spacing, and this is easy to do, provided you are willing to accept the disadvantages of editing your template, and if you can work out exactly which part of the template code to change.

The pre-Header gap

A pet-hate of mine is the blank space above the first post, which looks strange unless you put something else in to the space. In this example, I've got an AdSense link-unit in the area highlighted in red, just to fill in the empty area:

How to change this

1 Edit your template - don't forget to take a backup.

2 Find this code (use the text-find feature in your browser, eg ctrl/f in Chrome to make finding it easier)

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

The exact numbers used in your template may be different: the key thing is to find the CSS command that is putting a margin above the post header. In the template that I took this example from (Simple), it's the "0.75em" - which puts 75% of the space of a the post-header characters as a blank space above the header.

3 Change the first margin value: how much to change it by depends on your template, but in some cases I've used 0 successfully.

In CSS, when a margin statement has three numbers beside it, they refer to the

top,
left-and-right,
bottom

margins respectively. So if you want to do something else to the post-header, eg indent it, this is the place to make changes

4 Click Preview to see what the blog will look like - keep doing this until you get the right setting.

5 When you are happy with the spacing, click Save Template to apply the changes to your blog. (Or Clear Edits if you cannot get it right and need to stop trying).

Note: If you make a big change to your template like this, it would be a good idea to check out out in at least one version of the other browsers that your readers use - at the moment, this usually means Internet Explorer 8, Firefox and Chrome. But it may depend on your niche - a tool like Google Analytics will give you some statistics about what browsers, and screen sizes, your visitors have.

Also, it is possible to make this change by just installing a new CSS rule for h3.post-title into your blog - because the latest one found is always the one used, and because the template designer's Add CSS function puts the rules you add after the othr rules. I don't recommend it here, though, because working with the original rule makes it easier to see the effect of making changes to any of the values in the area.

Other affected spacing

If you have more than one post per page, then this change will also reduce the amount of space between the bottom of one post and the header of the next one. Depending on your template, you want want to add a little more space into the margin statement in the bottom of the post-footer, eg

.post-footer {
margin: 20px -2px 20;
padding: 5px 10px;
}

If you display comments in your blog, you also need to check the impact on comments, because the original command applied to h4 items in comments as well.

If you are making a lot of changes, you may want to make a test blog, and plan your changes in private before applying them to your main blog.