One thing that you need to have in mind when designing a Blogger template is the general width of your template and how the columns inside of it will be arranged. Here is a quick explanation to help you understand how it work’s when it comes to setting columns and width in your template’s CSS.
The elements
There are a couple of elements that you should have in mind when it comes to columns and widths, and those are:
- #outer-wrapper: This is the div that is wrapping all the blog and making it centered on the page, its width is the maximum area that your blog can occupy, (For example if your outer-wrapper have a width of 1000px, it is the maximum width of the whole blog, meaning that all the other widths added together should be less or equal to 1000px)
- #main-wrapper: This is your main column, means the one that hold your posts, it is generally wider than your sidebar in order to hold larger content and text.
- #sidebar-wrapper: This is your sidebar columns, the one that holds your widgets and stuff to the side, it is generally smaller than the main-wrapper, for obvious reasons.
How the columns are arranged
So as you can see the outer-wrapper will always set the maximum width of your template. The main-wrapper and the sidebar-wrapper are floating elements, so you have to be careful when setting valued for their widths because if they don’t fine enough space they will not behave as we want them to.
Let’s do the math, as you can see in the picture below, we have a little simple equation:
X + Y + Z + Y + X + W + K + W + X = outer-wrapper width
Be aware that you need to be careful for what are the real widths of your columns. For example: If you set to your main-wrapper a width of 400px and you having a 10px padding and a 10px margin, you need to add those values in order to get the real width. That would be 400 + 10 + 10 + 10 + 10 = 440px.
Final Words
So keep that in mind when you try to make changes in your templates. If you want to add another column remember to enlarge your outer wrapper or reduce the width of your existing column in order to get enough space to fit the new column.
This was a very basic explanation about the arrangement of columns in your templates. I hope that it will help beginners to understand the structure of Blogger templates. For this example I have used a basic 2 column layout, but if you get the main point of it, you will be able to understand all the other layout models.
If you have any questions about it, just drop me a comment below. There are a lot more stuff to come, so to don’t miss out, make sure you subscribe and follow us on twitter.
