How To Make 3 Column Layout

Hey Man, well I wanted to ask you one thing finding precise, I have seen 2 blog templates with simple but very good for aesthetics, to my taste very good, in 2 blog can be seen the same structure but with a clear header a different color base different and a different background, I think the blog is 2 "Straight To Hill" and "The Last Disaster" Well I like the structure of the blog set up like that and my question is that if the template is available so if I change the main color of the blog, clearly the background and the header and the titles are complementary but the gadgets ... but I would like to take this structure as the font, the 3 columns in general that, look for some people attach the template and you gave me if you can help me there.

Is an example email from some friends asking how to edit the layout to 3 columns, and what he says is correct, structure on this blog is the same as the T.L.D, because i take the idea from there ..... he he he he he! SORYY T.L.D but I Like You So Much

So now on this tutorial we will be discussed how to make 3 column layout, in just a few steps you can make it


Step 1:

Before changing anything, make sure to backup the original template. After login, click on the Blogger Dashboard Layout> Template> Edit HTML. Click on any posts on the "Download Full Template" to save the backup file in the template .Xml on your computer.

Now directed attention to the script of the CSS box. Scroll down to view the script until you find the following codes:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;
}

#main-wrapper {
width: 410px;
float: left;
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 */
}

#sidebar-wrapper {
width: 220px;
float: right;
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 */
}


Step 2:

Then change the script with this script,

#outer-wrapper {
width: 900px;
margin: 0 auto;
padding: 10px 0px;
text-align: left;
font: normal normal 87% Georgia, Times, serif;
}

#main-wrapper {
width: 410px;
margin: 0 10px 0;
}

#left-sidebar-wrapper, #right-sidebar-wrapper {
width: 200px;
}

#main-wrapper, #left-sidebar-wrapper, #right-sidebar-wrapper {
border: 1px solid #000000;
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 */
}

#left-sidebar-wrapper, #main-wrapper {
float: left;
}

#right-sidebar-wrapper {
float: right;
}

.crosscol {
text-align: center;
margin: 10px;
}


Step 3:

Do not forget to change the width of the header and footer to be 900px;

On header:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #333333;
}

to be replaced with:

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid #333333;
}


if you want to measure the height header bigger, you can add


heigth:700px; under width:900px;


On footer:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


to be replaced with:


#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


step 4

save the changes and see your blog