The margins of each blog element (ie: header, sidebar, main-section) are specified in the "Style" section of your Blogger template:
- In the "new" Blogger layouts templates, the style is specified between the <b:skin> and </b:skin> tags
- In "Classic" Blogger templates, the styles are specified between the <style> and </style> tags
The best way for me to explain how margins work is by using an example; here is the style element for my right sidebar as it appears in my blog template:
#sidebar-wrapper {We need to focus on the red line, which specifies the margins (the space surrounding) the sidebar element. As you can see, there are four margins specified in this one line; these are defined in the following order:
margin: 0 14px 0 10px;
width: 240px;
float: right;
background-color: $mainBgColor;
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 */
}
- Top margin: 0
- Right margin: 14px
- Bottom margin: 0
- Left margin: 10px
margin: 10px 14px 0 10px;Sides which do not have a margion should be specified as "0"; those for which you would like a margin can have this specified in pixels (eg: 10px), or in other CSS units (which you can read about here). In most Blogger templates, margins are specified as pixels.
If you prefer all margins surrounding an element to be equal, you can define this using only one statement, eg:
margin: 15px;This ensures that the margins of the top, right, bottom and left of an element are all 15 pixels wide.One final method of defining margins is to specify the margin in the description, eg:
margin-top: 15px; margin-right: 10px; margin-bottom: 5px; margin-left: 0;Here are some examples of the spaces which can be created using margins in the style of a template:
Header section has margins defined as "15px 15px 10px 15px.
Now the main-element has a margin-left definition of 15px...
... and finally, the "sidebar" element has margins defined as: 20px 0 0 40px; (in addition to the margins of the other elements).A great way to experiment with margins is to use the "Try it Editor" featured over at W3 Schools. Here you can adjust the margins in the left hand pane and see the results imedietly in the right section:
By default, the code does not feature DIV elements as you would find in Blogger templates, so you may like to copy and paste the following code into the left window in order to experiment in the same way I have described:
<html>
<head>
<style type="text/css">
.outer-wrapper {width:400px; height:200px; border:2px solid; border-color:#f00;}
.header {width:300; border:1px solid; margin: 15px 15px 10px 15px; float: left;}
.main {float:left; width:150; height:100px; border:1px solid; margin-left: 15px;}
.right {float:left; width:100; height:100px; border:1px solid; margin: 20px 0 0 40px;}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="header">Header section</div>
<div id="main-wrapper">
<div class="main">Main section</div>
<div class="right">Sidebar section</div>
</div>
</div>
</body>
</html>
Have fun experimenting with the margins of your Blogger template! Don't forget, you can always play around with the margins and preview the changes before saving. To be on the safe side, it's always good practise to make a backup of your template before altering it.
15 Comments:
Hi Amanda,
I'm very new at HTML, learning it as I go, mostly with you...
I like this post as it has some diagrams.
I finally figured out header and how to move it this weekend etc.
I just figured out that wrappers are below the header...I thought wrappers were like borders or something. I kept trying to figure out how to move the contents in the main body...and get looking in the html for main section lol.
Diagrams for a newb are good.
I cannot get a space between my sidebar and post section. Any thoughts?
Hi Amanda, don't mind if you can help me out here, Firstly, I am stumped at trying to reduce the spaces between vertical pictures on my sidebar and a technorati icon. (the space between is the title which i leave blank)
Also, I wonder how do you set up those buttons on your side bar, the 3 side by side and the row of little buttons. Is there a tutorial?
Hello Amanda, I'm a big fan of the blog,,,you've been able to answer pretty much all of my questions...
I'm still having one problem with my 3 columns (which I learned how to do from you haha).
I know it's probably an easy problem to fix, but I can't seem to figure it out reading through different guide's & how-to's.
There is too much space to the left of my left column, & not enough space to the right of my right column.
I would like all 3 columns to have equal space on the screen (with a little space on each side of the far left & far right column & a small space between the left/right column & middle column).
If you could take a look @ my blog & let me know what my problem is/how to go about fixing it, I would be extremely grateful.
Thanks a lot.
This is probably going to be the stupidest question ever, but my Blogger template squishes the posts together and I'd like to change the default spacing between posts in the main section of the blog. How do I do this? Is it as simple as finding the right bit of code and changing the margins? If so, which bit of code? :D Thanks!
Hi,
I have the same problem as Myk bLAuuw! i think...my sidebr and mian text are too close together (like the left and right margins are too big) - currently it is this:
http://thebloodroses.blogspot.com/
but i want the margins to be like this:
http://knighttcat.blogspot.com/
if you have any ideas as to how i can achieve that spacing, it would be much appreciated! :)
Thank you~
Hi, I have a slightly different question: How can I adjust the space of my text? I tried margins, but that just moves the whole grey box, never the text inside the grey box. I want to move it away from the black frame. Where should I change something to adjust the margin on the left side of the text?
http://evelle26.blogspot.com/
Thanks a lot!
Hi Amanda,
I, like crochet queen, cannot get a space between my sidebar and post section, creating a cluttered look on my blog. Any help would be appreciated. Thanks!
Thanks for the info!
Hi! I'm really new to this and get spontaneously lobotomized as soon as I have to figure something new out slightly related to the subject of computers and similar technical issues.. Anyways, I cannot get over the fact that my blog (not a really serious one, but with the current amount of knowledge it will never be) has such a narrow main area, resulting in all my pictures being cut off on the right side!
I would be sooo greatful if some mercyful soul would hand a fairly pedagogic explanation on how I should adress the to me rather frustrating matter!
Thanks in advance!
I have the same problem as many of you. I need more space between my main section and my sidebar. When I put up pictures in the main area to the size I would like they are cut off by the side bar. I tried to follow your directions but don't seem to have the same code as you show.
This is what it looks like-#sidebar-wrapper {
width: 250px;
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 */
}
I also have another question that perhaps you can answer. I have a great shade of orange for the text on my sidebar, but when I try to match it in my main body text the choice of shades are different. Is there any way to match the shade I prefer to be able to use it in the main body text?
Thanks, Raina
Post a Comment