23 Adjusting the margins and padding in your blog template (Blogger Template Design Series) January 24, 2008 /

Margins and padding are important aspects of Blogger design: they add space between and inside each element of your blog, while ensuring your content is well styled and easy to read.

In this installment of the Blogger Template Design series, I'll share the method I use to change the margins and padding in Blogger templates to ensure a cohesive layout. This post follows on from the previous installment which explained how to change the overall layout of your blog.

Blog margins define the space of each element in relation to each other, while padding defines the space within each element.

In its current state, the demonstration blog used to explain the tutorials in this series is visibly coherent despite that we have not yet altered the padding and margins. However, as we begin to alter each element of the blog template (the sidebars, header and main posts column), we will may notice these elements become squashed together, since there is no space defined between or within them.

The easy way to see how padding and margins will affect your template

Here is a method I almost always use when tweaking the margins and padding of my Blogger templates: add borders to each of the layout elements.

When we transform the template from this:

To this:

It becomes much easier to see how padding and margins will improve the overall appearance of the template!

Adding borders to your layout elements

When tweaking my templates, I find it best to add borders to the following areas:

• The outer wrapper
• The header section
• The Sidebar(s)
• The main posts column
• The Footer

To do this, we only need to add a single line of code to the styling for each of these sections:

border: 1px solid #000000;

Copy this line of code to your clipboard, then find each of the following lines in your template. Paste the line you have copied directly beneath each of the following lines in yout template's HTML code:

#outer-wrapper {
#header-wrapper {
#main-wrapper {
#sidebar-wrapper {
#footer {

If you have a three column layout, you will also need to add this in the styling for the new sidebar wrapper:

#new-sidebar-wrapper

Before you save this, you should preview your template to ensure each of the borders is in place. You may well notice a problem with the layout after adding these borders: your sidebar(s) may now be pushed out of place!

This is how the problem looks in the three column demonstration template.

But don't worry: this is easily solved by taking a few pixels away from the width of the main posts column

In the demonstration template, the width of the main posts column is 450px:

#main-wrapper {
border: 1px solid #000000;
width: 450px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

By taking six pixels from this value (leaving this at 444px instead), we can ensure the sidebars are properly aligned:

How to define margins

As I mentioned earlier in this post, margins define the space between each element in the layout. In the image above, we can see there is no space between the main posts column or either of the sidebars. We can use margins to create space between each of these elements.

However, we must be aware that adding margins to a layout element is almost like adding extra width to them. Unless we take some pixels away from an element, we risk pushing the layout out of place!

With this in mind, let's have a look at the demonstration template again:

We can see there is already some space to the left of the main column, and to the right of the right-hand sidebar (created by padding in the outer wrapper). However, there is no space between the main column and each of the sidebars.

To create this space, we will add a margin to the right of the main-wrapper, and a margin to the right of the first sidebar.

Adding a margin to the right of main wrapper

In the demonstration template, I'm going to add a margin of 10 pixels to the right hand side, which will create some space between the main wrapper and the neighboring sidebar.

To do this, I need to add a line of code to the style declarations for the main-wrapper, which is highlighted in red below:

#main-wrapper {
border: 1px solid #000000;
margin-right: 10px;
width: 444px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

As I haven't yet deducted any of the width from other elements, this now makes pushes one sidebar beneath the other.

But if I take 10px away from the current width of the main wrapper (making this 434px), the sidebar should fall back into place:

#main-wrapper {
border: 1px solid #000000;
width: 434px;
margin-right: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Making the layout appear like this:

Adding a margin to the right of the sidebar

I'm going to use the same techniques to add a space between the sidebars (which is also applicable for those who have their sidebar aligned to the left of the main column).

First, I'll add the margin declaration to the style for the sidebar-wrapper:

#sidebar-wrapper {
border: 1px solid #000000;
width: 250px;
margin-right: 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

But since I prefer the width of the sidebar to remain at 250px, I will deduct another 10px from the main wrapper instead, leaving the width of this section at 424px:

#main-wrapper {
border: 1px solid #000000;
width: 424px;
margin-right: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Now there is space between both the main and sidebar sections, providing a better overall appearance to the layout of the blog template:

In your own templates, you can increase or decrease the size of these margins as you wish, so long as you remember to deduct the same amount in pixels from a different area of the layout!

Now that we have arranged the margins between the layout elements, let's focus on ensuring the content of each section doesn't run too close to the borders.

How to define padding

Padding defines the space between the outer edges of an element and the content within.

Because I have defined borders in the demonstration template, it is easy to see that there is currently no padding between the edges and the content of the sidebars and main posts column (although there is already some space above and below the content).

I want to add 5 pixels of padding to each side in the main column and each of the sidebars in my demonstration template. This will decrease the available space within each of these elements by ten pixels of width (5 pixels from each side).

For this, I can use the same declaration for each of the elements:

padding: 0 5px 0 5px;

This declaration differs in style from that we used to define the margins. Rather than define the padding for each side of the element, we can define the padding for all four sides (top, right, bottom and left) in one declaration. In the example above, the zeros refer to the padding above and below the content, while the 5px's refer to the padding for the right and left areas.

To add this padding declaration to the main wrapper and each of the sidebars, we only need to copy this line:

padding: 0 5px 0 5px;

And paste this just below the following lines in the blog template:

#main-wrapper {
#sidebar-wrapper {
#new-sidebar-wrapper {

Unfortunately, these padding declarations once again cause the layout to be misaligned. This means that I need to deduct width from the sidebars in order to re-align them.

In my demonstration template, I have taken 25px in width from the width of both the sidebars, reducing them to 235 pixels each:

#sidebar-wrapper {
padding: 0 5px 0 5px;
border: 1px solid #000000;
width: 235px;
margin-right: 10px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#new-sidebar-wrapper {
padding: 0 5px 0 5px;
border: 1px solid #000000;
width: 235px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

In theory, this misalignment should not occur (this certainly doesn't happen when coding regular web pages!), and I cannot find an explanation or alternative solution for this, so if anyone could shed some light I would be very glad to hear from you!

With these padding declarations in place and the nescessary adjustments have been made, the demonstration template now looks like this:

The available width for the content of the main section is now 414px while that of the sidebars is 225px because of the padding inside these elements. We need to take note of these widths for later styling purposes, and to ensure any images we upload will fit in the available space.

Final words

This post has become rather long and complex, though I hope my explanations offer detailed and understandable instructions to help you change the margins and padding for your own custom templates.

Progress of the demonstration blog

For the time being, I have left the borders in place in my three column demonstration template as we have yet to make adjustments to the header and footer sections. And for those of you who were wondering about future installments, there's a little hint of what we'll accomplish in the future...

Coming soon...

The next installment will be a much shorter one, focusing on tidying the header and footer sections so they become easier to work with.

Then next week's installments, we will begin working on making the header section into a completely customized, highly functional area of the blog!

Please consider subscribing to the feed for updates to the Blogger Template Design series, plus Blogger related news and articles as they are posted.

As always, your comments and opinions are always welcomed!