Lining up the first post and the sidebar

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

In the themes that Blogger provides, as well as all third-party themes, 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 theme, 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 in many Designer themes, which looks strange unless you put something else in to the space.  In the example below, there is an AdSense link-unit in the area highlighted in red, just to fill in the empty space:

How to change the gap above the post header in Designer themes

1  Edit your theme  in the usual way.

2  Find this code

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 to get the result you want
How much to change it by depends on your template, but in some cases I've used 0 successfully.

What the numbers mean
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 Theme 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 theme, it's a good idea to check out out in at least one version of the other browsers that your readers use - usually means current versions of Internet Explorer, 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 theme, 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.

---

Related Articles

Setting up Google Analytics to get statistics about for your visitors

Adding a new CSS rule to your blog's theme

Advantages and disadvantages of editing your theme

How to edit your blogger theme

Who did your blogger theme come from - the quick way of finding out

Making a test-blog for template changes

Planning changes to your blog in private