Setting the Properties of a Container

>> Browse templatesMoney tips22 comments

Blogger Template Design: Tutorial 4

In this tutorial, you'll know the basics of what code sets the properties of a container. To make things simple, we'll look at 2 container blocks only - Main and Post. Once you know these, the basic ideas for all the other containers are pretty much the same.

Here is a sample code for the 2 containers:
#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;

The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).
  • Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue (post) container is placed inside the green (main) container following the post block's margin command (the codes in red). If the post's margins are all set to zero, then the post container would be exactly the same size as the main container. Think of the Margin as a command that moves its border away from a parent border. Another thing, Margin can have a negative value, which means that it moves toward the parent border and may overlap it (not away from it).
  • Padding - sets the distance between the border of the container to the border of a child (smaller) container inside it. In the case of the post container, the child container is the post-body. The 4 numbers defining the padding sets the padding in a clock-wise fashion also, just like the Margin property. See how the post's padding puts the post-body inside the post container, away from the dashed border. Unlike the Margin, think of the Padding as a command that moves a child border away from its border. Padding values cannot be negative.
  • Min-width and Max-width - sets the width of the container. Usually, it's enough to write it as width = 400px (for example), but it's becoming more of my habit to set the width as strict as possible, because I sometimes saw that if it's not written strictly, the container width might shrink and expand freely on some situations and in some different browsers. So by setting the width strictly, I made sure that it looks exactly like I want at all times in all browsers (basically getting rid of alignment bugs). If you look at my newer templates, I even set the width redundantly, say in Main-wrapper and then in Main containers eventhough they are pretty much the same. Doing it this way solves some alignment bugs that I saw (eventhough I don't really understand why it solves it by writing it redundantly).
  • Background - sets the background color of the container. It uses the hexadecimal code for colors. See here for all the color values. You can also set a background image that repeats itself to cover the whole container block. The way to do this is by pointing to the URL of an image. For details on how to do this, see W3Schools tutorials. You can also set the value to be $samplevariable, where the variable is the one that you define in Subsection 1 in CSS Styling Structure.
  • Color - sets the color of your text using the hexadecimal color code, or the variable defined earlier in Subsection 1.
  • Font - sets the font of your text. You can use the variables set in Subsection 1 also. See W3Schools tutorials for more details on setting the font properties.
  • Text-align - sets the alignment of your text. The 3 options are either left, center, or right.
  • Line-height - sets the distance, or height, between two text lines.
My tutorial just gives the basic idea on some of the codes in the Blogger templates. I'd say the most important ones for a basic understanding are the margin and padding commands. If you want a more detailed explanation on CSS styling language, I recommend w3Schools CSS Tutorial as a quick and easy resource center.

Next Tutorial:
The next tutorial is on the quick overview of all the common containers and elements in a Blogger template.


Daniel Cruz January 22, 2008 8:44 pm  

I like this blog is fantastic, is really good written. Congratulation. Do you want to see something more? Read it...:Great investment opportunity in Costa Rica: beach real estate, condo, condos for sale. Visit us for more info at:

SostyPasha February 01, 2009 2:33 am  

Thanx so much :)
may God bless you mate

jaffa April 20, 2012 12:06 am  

In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non visual styles such as the speed and emphasis with which text is read out by aural text readers. Thanks.
mississauga real estate agent

santa May 08, 2012 2:42 am  

Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. Thanks.
health insurance quotes california

steve7876 August 10, 2015 8:24 am  

The learning lab is providing the best Maths and English tutor in Sydney and if you are looking for maths tutor for your child contact us now!

shahbaz July 23, 2016 5:11 am  

Deem as magnanimous beside difference in fiat to blunder for this saintly sale inventory group unusual piddling encompass introduce.honeymoon packages in Brazil

shahbaz July 25, 2016 6:43 am  

Pepperfry coupon codes are retailed on Couponmama- a competent dealer of coupon codes and discount coupons. If we talk about tables then, variety of tables are ready to serve

shahbaz September 03, 2016 4:06 am  

Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I’ll be sure to check back again real soon.flat icon

shahbaz September 21, 2016 12:36 am  

You may contact my previous clients who will tell you about work quality and make you choose my services wholesalebodyoils

shahbaz October 29, 2016 1:11 am  

It is imperative that they read weblog post carefully,I would like to thank you for this excellent information!banking exchange rates currency

Legal Herbal Online December 21, 2016 6:45 am  

Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share recuperar dados

shahbaz December 28, 2016 10:01 pm  

Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep transfer rates

bettycyoung January 18, 2017 11:38 pm  

Great antimicrobial to allergens, mold, germs, Best Crib Mattress under $100. It uses an extraordinary blend Fine.

virginiaddavis February 22, 2017 10:38 pm  

good Showbox is an application that aids you in Watch Showbox APK with this Showbox Application. So, there is constantly nice.

John Rowland March 29, 2017 10:03 am  

This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.

triciagonzalez April 25, 2017 11:12 pm  

To gain access to all media content over the world Kodi for iPhone, iPad, iOS Download (with & without Jailbreak) is an all-rounder app when it comes to handling media.

Lukas Wessels May 30, 2017 10:59 pm  

i am glad approximately those forms of blogs and posts and also maintain up them. In that form of blogs and development substitution is receiving better up too much. thanks for sharing us one of these discovered element. Galaxy Jacket for Women

samish leather June 14, 2017 9:53 pm  

Interesting article! Thank you for sharing them! I hope you will continue to have similar posts to share with everyone. Star Trek Costumes

Unknown June 15, 2017 11:46 pm  

Your selection of topic is very good and also well written. Thanks for sharing with us most effective information.
Keep sharing more with us!
Very amazing article!! I have enjoyed reading. Nice blog. I will keep visiting this blog very often
Keep sharing more with us!!
Spiderman 2 Tobey Maguire jacket

R3K Groups July 31, 2017 10:43 pm  

buy tumblr followers

R3K Groups July 31, 2017 10:44 pm  

buy tumblr followers

buy tumblr followers

pixie cerny August 03, 2017 11:11 pm  
This comment has been removed by the author.