89 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!

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

89 comments:

  1. I'm going to have to remember to come back here since I use blogger as my platform. I also wanted to pop in and welcome you to entrecard. I hope you enjoy the place. ;)

    ReplyDelete
    Replies
    1. indeed, so instructional, thanks amanda.

      Delete
  2. Thanks for stopping by Mikster! Hope you enjoy the tutorials here.

    I only joined Entrecard last night, though already I'm finding this a really useful tool.

    Best wishes,

    Amanda

    ReplyDelete
  3. Hi Amanda, I am one of your loyal readers, and fortunately today i have problem which i conclude it may derive from margin and pading. I already take alook on your advice from this post, but it seems that the problem persist. I just made some post and i shock to see the right panel come down the main panel.
    Your advice really much appreciated. Thanks

    ReplyDelete
  4. Thanks for the excellent explanations/guidance! I'm a rookie at this and i appreciate what you're doing here.

    ReplyDelete
  5. Thanks for a great series on adjusting our blogging themes/templates. I've been following and learning a lot! You just solved a huge problem for me in this post. Thanks.

    ReplyDelete
  6. Hello,
    thank you for your easy to make guideline. I've adjust my blog accodingly. Thanks again.

    Vlada

    ReplyDelete
  7. Amanda, I love you! You're a goddess! This series is excellent, and I'm having a lot of fun with it.

    ReplyDelete
  8. Hi Amanda! I'm absoluting loving this site. I've learned so much & wasted so much time creating a new template, lol.

    Only problem I'm having... I've created my own header, however, when I upload it, I get two thin lines around it & my header sits in the middle. How can I get rid of those lines? I've gone through all of your steps & can't find the answer I'm looking for.

    Thanks in advanced!
    Amy

    ReplyDelete
  9. Wouldn't you know, right after I asked that question, I found my answer! lol

    ReplyDelete
  10. Hi !

    I want to change the wight of my blog but I don't succeed. When I try, the font increase instead of the columns. What I have to do ?
    My template is a blogcrowds 3 columns blue thisaway.

    And I try to understand why my sidebar buttons don't appear entirely.
    Thank a lot if you have some ideas !

    ReplyDelete
  11. I just found your site. Thanks so much for the help! This was actually really easy to follow.

    ReplyDelete
  12. Thank you so much for this wonderful information. For a beginner blogger without a clue this sight is invaluable.

    ReplyDelete
  13. hi, i was wondering if you could help me, everything looks fine but when i click on the post url, i have to scroll down to read the post and it seems that the post goes on with no breaks, it looks really sloppy, how can i fix this? Thanks

    ReplyDelete
  14. I'm not sure if this is related to padding, but I'd like to amend my blog so that there's a larger space between blog posts. At the moment, there's no space between the tags of one post and the title of the next post, and it looks very awkward. Is there a way to fix this? Cheers.

    ReplyDelete
  15. Hey Amanda...

    Thanks as always for your help and tutorials. Could you please help me try to sort out why my blog is not centered. I am a novice at this and I cannot figure out what to tweak to center the main column. Any help would be greatly appreciated. Thanks for your time in advance!

    www.lostboyblue.com

    ReplyDelete
  16. this is good!

    http://testblog-sly.blogspot.com

    i had my margin problem solved!

    nx thing to do is the header! :D

    then the footer!

    all guide through ur tutorials!

    thank u so much!

    ReplyDelete
  17. Thanks for this post...
    Its help me a lot...

    ReplyDelete
  18. Hi Amanda

    I've tried adjusting both my margins and my padding, yet I can't reduce the amount of space around my footer (although I do seem to be able to get it to go from left to right).

    Here's the code for my footer, if that helps:

    /* Footer
    ----------------------------------------------- */
    #footer {
    width:900px;
    clear:both;
    margin:0 0 0 0 auto;
    padding-top:0px;
    line-height: 1.6em;
    text-transform:uppercase;
    letter-spacing:.1em;
    text-align: center;
    }

    ReplyDelete
  19. Thanks so much! I needed to change my padding and this did the trick. Very clearly explained. THanks!

    ReplyDelete
  20. Hello, I seem to be having problem with my paragraph spacing and the spacing between my main wrapper and the right column, any help would be great. This is my blog:

    http://lovemelovemychoc.blogspot.com/

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
    width: 800px;
    margin:0 auto;
    padding:20px;
    text-align:$startSide;
    font: $bodyfont;
    }


    #main-wrapper {
    margin-left: 0px;
    margin-right 0px;
    width: 500px;
    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 */
    }

    #right-sidebar-wrapper {
    width: 200px;
    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 */
    }

    #left-sidebar-wrapper2 {
    width: 70px;
    float: left;
    word-wrap: break-word;
    overflow: hidden;
    }

    /* Headings
    ----------------------------------------------- */

    h2 {
    margin:1.5em 0 .75em;
    font:$headerfont;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:$sidebarcolor;
    }


    /* Posts
    -----------------------------------------------
    */
    h2.date-header {
    margin:1.5em 0 .5em;
    }

    .post {
    margin:0em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
    .post h3 {
    margin:.20em 0 0;
    padding:0 0 4px;
    font-size:120%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:normal;
    }

    .post h3 strong, .post h3 a:hover {
    color:$textcolor;
    }

    .post-body {
    margin:0 0 .75em;
    line-height:1.5em;
    }

    .post-body blockquote {
    line-height:0em;
    }

    .post-footer {
    margin: .25em 0;
    color:$sidebarcolor;
    text-transform:uppercase;
    letter-spacing:.1em;
    font: $postfooterfont;
    line-height:1.4em;
    }

    .comment-link {
    margin-$startSide:.6em;
    }
    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }

    I can't seem to centralize my outer wrapper with my heading as my heading width is larger than my outer wrapper width.

    ReplyDelete
  21. Thank you very, just what I needed. My posts look better now with the padding.
    Two thumbs up!!

    ReplyDelete
  22. All I want to do is increase the amount of space between the bottom of my header and the post directly below it but I can't figure it out. No matter what margin or padding I adjust, it doesn't change that space. Help!

    ReplyDelete
  23. This was exactly what i was looking for. Thanks so much!

    ReplyDelete
  24. it worked great, thanks.

    My two right columns are a little crowded; could you please tell me how do I add space between the two (margin)?
    Thanks again

    ReplyDelete
  25. Thank you so much for the explanation on the padding term! xD Being wondering what those 0 0 0's are all about.

    ReplyDelete
  26. Hi there.

    Is there a way to reduce the margin just above the header and not at the sides? My outer wrapper is currently set to 100px, which is pefect for the sides, but leaves too much room between the header and the nav bar?

    http://thelivelong.blogspot.com/

    Thank you!

    ReplyDelete
  27. Blogger supports Google's AdSense service as a way of generating revenue from running a blog. I am the best blogger in my city, I have 1000 post!22dd

    ReplyDelete
  28. I am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.

    ReplyDelete
  29. Thanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information

    ReplyDelete
  30. nice post -- thanks a bunch

    ReplyDelete
  31. This was of great help to understand how this things work. However, what about if you want to place your sidebar to touch with the header? is that possible?

    ReplyDelete
  32. hanks so much for working on this for me. I've got everything updated but still having a hard time with the drop down menu. Its not showing all of the links. Is there a height adjustment that I should make?

    ReplyDelete
  33. How do I remove spaces/margins? to the left and right of images in my posts, in other words from the edge of the image to the the edge of the inner background?
    I want the images in my posts to be flush with my inner background, i've sized the images to the same size as the page width but they kick out to the right because of a margin and/or padding. I don't know how to find it and change it.
    Thank you

    ReplyDelete
  34. Sorry, forgot the address: http://sheepinthegarden.blogspot.com/

    ReplyDelete
  35. I already take a look on your advice from this post, but it seems that the problem persist. I just made some post and i shock to see the right panel come down the main panel.

    ReplyDelete
  36. This is a way to get everyone engaged so that the community can come together and solve problems as they emerge.

    ReplyDelete
  37. It is not so much the idea that generates interest and debate but the varying interpretations of how the concept might be translated into practice.

    ReplyDelete
  38. I've just read this post and understood that they offer a good idea to find a solution to this problem.

    ReplyDelete
  39. This article has really touched me. I even spent my time to read out all of the commentaries.Appreciative!

    ReplyDelete
  40. My favorite topic! I've been looking for such articles for a long time. I'm lucky, I got it!

    ReplyDelete
  41. ugg boots sale online Women's water to end when Dong Xiaokui casually asked one: "Sunzong be free?" ugg sale Here are the seventh heaven of the eighth level. Dong Xiaokui is not seen the rest of the place ugg boots Zhou Zhen-Zhen and Dong Xiaokui of similar stature are slim type ugg boots sale (I will be on the road these days to run around uggs outlet The other side of this side is not so to speak cheap ugg boots Heard this matter on this side the other side uggs boots on sale after all uggs boots by ugg boots cheap his face put on a Jisi of anxiety and sense of loss. And "shabu" opened the bag ugg boots on sale even to buy a new package were lent to you

    ReplyDelete
  42. This article is full of impressions. I’m admiring with such things that are mentioned here. It’s unbelievable.

    ReplyDelete
  43. There is a fair amount of controversy in the scientific community regarding the use of this substance in food manufacturing process.

    ReplyDelete
  44. Thank you for the information that provided.

    ReplyDelete
  45. Hi,
    I had a quick question; how do you lessen the space between the post title and the date? I can't find this info anywhere. Thanks!

    ReplyDelete
  46. I've used several of your other articles to help out with my blog. Thank you so much.

    Question: I have an issue with having a background picture that is too big (1200x 750) as it covers my header. I'd like my header visible. Any suggestions on how I can fix that?

    ReplyDelete
  47. thank you for the help! I always had a problem with my text being too close to my edges. Thanks again!

    ReplyDelete
  48. Hi there! I could have sworn I've been to this site before but after checking through some of the post I realized it's new to me. Nonetheless, I'm definitely delighted I found it and I'll be bookmarking and checking back frequently!
    Visit This Web-site

    ReplyDelete
  49. it didn't work for me... I can't even find #sidebar-wrapper { in my HTML... help?!

    ReplyDelete
    Replies
    1. I had the same problem. When I opened the template in HTML and did a text search, I couldn't find any of the terms: #outer-wrapper {, #header-wrapper {, #main-wrapper {, #sidebar-wrapper {, #footer {. I'm thinking maybe they're using different HTML tags since this article was written...

      Delete
  50. why people are putting scrap in comments why dont you keep a check

    ReplyDelete
  51. You done certain reliable points there. I did a search on the subject and found nearly all persons will agree with your blog.

    ReplyDelete
  52. hi. please help me, Amanda. i want to know how to add a padding style (top padding) in Blogger posts only, but not on the homepage or Blogger pages, only in Blogger posts. is there a way to do it? thank you!

    ReplyDelete
  53. Thank you so much

    http://www.pschunt.com/

    ReplyDelete
  54. Its a lot to tweak, but thank you for this I'll be doing it to my blog facebook topic to make it more attractive and not messy.

    ReplyDelete
  55. Hi, If you look at this blog http://travelinformation-nepal.blogspot.com/ then first, there is one line between sidebar and main wrapper, i just wanted to put it right between two column or remove and second, In side bar there is alot gap between line and the starting bullet. how can i remove those gaps? your help will be really appreciated. thanks in advance and good day :)

    ReplyDelete
  56. Thanks for this post! Would you know how to reduce the header padding above it so you don't see the background above it? I'm trying to add a navigation bar above the header (like abeautifulmess.com) and thought maybe this might be the way. Thanks! If you know how to do this, please email me! I'd really appreciate it! :) acreativecookie AT gmail

    ReplyDelete
  57. [url=http://www.i33i.com/pin/]تعارف بلاك بيري[/url]
    [url=http://voice.i33i.com/]شات صوتي[/url]
    [url=http://www.i33i.com/]لول[/url]
    [url=http://vb.i33i.com/]منتديات[/url]
    [url=http://voice.i33i.com/]دردشة صوتية[/url]
    [url=http://www.kalge.com/]شات الخليج[/url]
    [url=http://chat.i33i.com/]شات كتابي[/url]
    [url=http://www.ksssk.com/]شات روحي[/url]
    [url=http://www.al7arf.com/vb/]الحرف الشاعري [/url]

    ReplyDelete
  58. http://voice.a6h6.com

    http://voice.a6h6.com/

    http://voice.a6h6.com/

    http://voice.a6h6.com

    ReplyDelete
  59. Great article, Amanda, very well-written. I, too, have been trying to figure out how to change the margins and padding in Blogger.

    Is it possible, though, that Blogger is now using different HTML tags than the ones you listed? (i.e., #outer-wrapper {, #header-wrapper {, #main-wrapper {, #sidebar-wrapper {, #footer {). I opened the template in HTML and did a text search for those terms, but found nothing.

    I've been putting off learning HTML. Guess this is as good a time as any! :)

    ReplyDelete
  60. شات صوتي , شات عطر الجنوب,عطر كام ,شات صوتي , دردشة عطر الصوتي , شات دردشة عطر كول , شات عطر توب . دردشة عطر الجنوب,عطر كام ,عطر الجنوب, عطر الجنوب , عطر الجنوب
    http://3trjnub.com/vb

    ReplyDelete
  61. شات انحراف سعودي انحراف شات سعودي حر شات سعودي كامات شات صوتي سعودي دردشة سعودي حر سعودي انحراف سعودي كامات chat Voice.

    http://www.modk1.com

    ReplyDelete
  62. http://www.alwastah.com/


    أول منتدى سعودي متخصص بالواسطات. اذا كنت وسيط شاركنا و استثمر علاقاتك أو اذا كنت تبحث عن واسطه سجل معنا و انجز معاملاتك. أفضل منتدى للوساطة الالكترونية ...

    منتديات الواسطة

    ReplyDelete
  63. Hi ....!
    Nice Post
    If you know about how toincrease your height.

    ReplyDelete
  64. http://3trjnub.com
    شات صوتي , شات عطر الجنوب,عطر كام ,شات صوتي , دردشة عطر الصوتي , شات دردشة عطر كول , شات عطر توب . دردشة عطر الجنوب,عطر كام ,عطر الجنوب, عطر الجنوب , عطر الجنوب

    ReplyDelete
  65. شات قمر الكويت , دردشة قمر الكويت , شات قمر السعودية , شات قمرين , شات قمر.

    http://qmrq8.com/

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy