How to use Margins to get the shape of your blog theme

I posted an explanation of how Margins and Padding works in CSS earlier tonight.

I thought it would be good to expand on Margins to show how they can shape your blog theme.

What better example than the Funky Red theme i designed for Blogging Tips to show you how margins can work.

Blogging Tips Funky Red Margins

I set the main frame at a size of 1000 pixels. I use to always set my websites at a size of 770 pixels to accomodate 800×600 resoultions. However, with monitors coming down in price over the last 3-4 years i no longer feel the need to accomodate such small resolutions.

So i aligned the frame in the center of the screen and set it at 1000 pixels. So i have 1000 pixels to play with. The main content area has 3 sections. Namely a left column, main center column and a right column.

The code for the shape of the left hand column is :

width:150px;
margin : 5px 0px;


This means that the top and bottom of the column had a 5 pixel space but the left and right hand side has no margin.

For the main content area the css code is :

width:620px;
margin : 5px 10px;


The above defines the main blog area as 620 pixels wide with a 10 pixel margin to the left and right hand side and a 5 pixel margin at the top and bottom just like left column.

Now onto the right column :

width:200px;
margin :5px 0px;


The right column is 50 pixels wider than the left column but it shares the same margin values ie. 5 pixels margin at the top and bottom and 0 pixels at the bottom.

First thing you will notice is that all 3 columns have a 5px margin at the top and bottom. All this does is create a 5 pixel biffer zone after the header and before the footer. It obviously is much nicer to have 3 columns aligned the same way

Making sure that the divs dont mess up

CSS is very unforgiving when it comes to div alignment and margin widths.

Lets look at my design and see that everything fits ok

The left hand column is 150 pixels, the main area is 620 pixels and the right hand column is 200 pixels. Therefore the columns total 970 pixels in size. If you look back at the code for the main column you will remember that the main column had a margin of 10 pixels on each side so the main column area effectively takes up 620 pixels. The total is now 990 pixels wide. So wheres the extra 10 pixels went?

I referred to my main content frame at the start of the post. Here is the width and margin code for it is :


#frame {
width:1010px;
margin-right:auto;
margin-left:auto;
text-align:left;
}


The auto property in the margin aligns bloggingtips.org to the center of the screen. It also adds a 5 pixel margin to the left and right hand side of the site. This 10 pixels in margin brings my total design to 1000 pixels in width.

Summary

The main point of this post was to try and make you remember to include margins when working out the total length of your blog or website design. Columns can get placed below the main content area if you set one of the areas to be too wide. So its important to pay attention to how wide each section is.

If you want me to expand on any of this please let me know

Good luck

Thanks,

Kevin