Some template modifications

10 Dec 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 12)

The vertical columns (#c2, #c3, #c4) in the template can easily be rearranged by changing the value of the float property in the stylesheet.

The columns are currently all set to float:left;

#c2, #c3, #c4 {float:left;}

We can move either the left (#c2) or middle columns (#c3) to the right, simply by changing the float value:

CSS for moving the Middle column to the right

#c2, #c4 {float:left;}
#c3 {float:right;}

CSS for moving the middle column to the left

#c3, #c4 {float:left;}
#c2 {float:right;}

CSS for swapping the left and right columns

#c2, #c3, #c4 {float:right;}

The Site heading and horizontal menu can also be aligned to the right, by using the text-align:right; property and value:

#c1 {text-align:right;}

To create a two column template, simply remove Content 4 from the HTML document, and redefine the width value of content 2 in the stylesheet:

#c2 {width:300px;}

That’s it, you have made it to the end of the complete template tutorial . Thanks for sticking around

mahud.

< Back to everything

Related Posts

• greenSkin Proboards skin
• Liquefied Proboards skin
• Ouroboros Proboards skin
• Paladin Proboards skin
• Heartilly2 Proboards skin