July 16, 2007

Create a three column Blogger template

In this tutorial, I'll explain how to create a three column template in Blogger layouts, using the Minima template as a starting point.

The Minima template is the easiest Blogger template to customise, as this is the simplest two column template, and has few parameters regarding margins, padding and the like. Once you have developed the third column, it will then be easier to alter font-size, colours and such so leave this until later on. We're going to concentrate on the actual layout first.

First of all, set your template to Minima (not the stretch template, but any colour will do!), then follow these instructions:

  1. Go to Template>Edit HTML, leaving the "Expand widget templates" box unchecked.
  2. Now, find this section in the HTML code:
    #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 */ }
    Copy this entire section, and paste it directly below. We're going to change the elements I've highlighted in red to the following:
    #left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)
    This will provide the styling for the new sidebar element which we will create next.
  3. Now, you need to find this section further down the page:
    <div id='main-wrapper'>
    . Immedietly before this section, you should paste the following piece of code:
    <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>
    Let me explain the elements of this code to help you understand what we've just done:
    • <div id='left-sidebar-wrapper'> This section tells the browser that the left-sidebar element exists here, and to look in the css for the appropriate styling for this element.
    • <b:section class='sidebar' id='left-sidebar' preferred='yes'> This tells the browser the class of the sidebar element and all other elements (widgets) which may be included in this section. The ID of this element must be "left-sidebar" in order to make it unique, otherwie this would cause problems when viewing. It is preferred so that it will feature in the layout, even if no widgets are placed within it.
  4. If you preview your template, you will notice that the right sidebar will be beneath the main section at the moment. This is because the outer-wrapper is still only wide enough to accomodate one sidebar. So now we need to expand the oputer wrapper to accomodate this new sidebar. Find this section in the HTML code:
    /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
    We need to increase the width of the wrapper by the width of the left-sidebar-wrapper, in this case 220px. So, change the value in red to 880px.
  5. You may also want to change the width of the header-wrapper to 880px so that it spans the new width of your blog:
    #header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }
  6. At this point, you should save your template. At present, your new sidebar will not be seen as there are no widgets contained within it, though it will still be present in the markup of the page. Once you have saved your template, go to Template>Page elements in your Blogger dashboard.
  7. Your layouts section should now look something like this: You can now add a page element (or two) to your new left sidebar.
  8. But we aren't quite finished yet! If you add anything to this left sidebar, you will probably notice that it jams right up to the main section, like this: This is because there is no space defined between the left-sidebar and the main section. We need to create this space in the template's HTML. To do this, we will add a margin to the left hand side of the main posts section. Find the following code in your template's HTML and add the code defined in red:
    #main-wrapper { width: 410px; float: left; margin-left: 20px; 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 */ }
    This defines a margin space of 20px between the left-sidebar and the main column. You should also ensure you adjust thw width of the outer-wrapper from 880px to 900px to ensure the width of your blog is enough to accomodate this margin too. Either that, or you could reduce the width of your main column/a sidebar by 20px to serve the same purpose. Now, your previewed template should look more like this:
  9. Finally, save your template and enjoy your new sidebar!

The same principles described here can help you create a three column template from any Blogger template, though you may find that you'll need to adjust the width, margins and padding for your new sidebar in order for it to look the way you would like.

Also, you can configure your new sidebar to float to the right, and have two sidebars on the right of the main column if you prefer. Simply set the CSS of your new sidebar to float: right; instead.

Here is a download of the three column Minima template for reference (or if you prefer to use a preconfigured template instead!):

Download 3 column Minima template

For more Blogger templates to download, please have a look through the Templates section here at Blogger Buster.

Technorati Tags: | | | |



View blog reactions


Related Posts by Categories



Post a Comment 94 Comments:

17 July 2007 19:16 *Miss Nice* said...

Nice post Amanda. I am wondering how do you create a three column blog with my current template? I am using "The Late Show" by Liz L. I want to use the left side since it feels so empty!

This is my blog www.filfilah.com

18 July 2007 11:31 Amanda said...

I would imagine it's possible with some adjustments to the width of the main column/right sidebar, and padding at the top of the (new) left sidebar to accomodate the image above. I'll take a look at this soon and let you know how it can be achieved.

20 July 2007 09:07 Amanda said...

@Miss Nice: After taking a look at the CSS, I've noticed the div elements can be adjusted if the body is defined as a three column template. However, this has posed some problems in creating the third column so far, as the css isn't specific about which elements can be attributed to a left-sidebar.

I'm going to be away for a week now, but when I come back I'll take another look at the template to see what I can accomplish with it. Apologies for the delay!

22 July 2007 00:37 Kaliqo said...

Thanks so much for the help. The changes to my template work and look great.

31 July 2007 08:44 jayadrathsingh said...

hi I just redesigned my blog to 3 column thanks for your tips. the r so easy to understand.
now i've got a problem that header widget and sidebar widget are too close can you tell me how to increase top margin in side bar?

31 July 2007 15:36 Carter-Ann said...

Hi, stupid question. I've edited the template and all looks good except my sub title is slightly off center now. Any idea how to get it back on center?

31 July 2007 16:34 Amanda said...

@jayadrathsingh: I'm going to post a tutorial about margins and padding shortly, which should help answer your questions. If you need more specific help (or urgent assistance) feel free to email me.

@carter-ann: I've just taken a look at your blog, and I'm not quite sure what you mean. Are you referring to the description (beneath the blog title)? If so, I really can't see a problem when looking at the source code. Perhaps this may be because the H is beneath the title's T? If so, you could try breaking the description over two lines instead of one, or altering the size of the fonts to see if this makes a difference to the overall appearance.

Feel free to email me if I can offer more specific help.

31 July 2007 18:24 Grobelaar said...

I have the same problem as Carter-Ann. When I look at the Page Element screen - the widgets in the old right hand column run off the edge of the pasteboard, the header widget also runs off the edge of the pasteboard and you cannot click on their edit buttons.

When you preview the blog - the header's subtitle is off-centre.

This is in the latest version of Firefox.

When I view in latest IE - I have the same problem with the widgets - but they are fully rendered, so I can hit the edit link, while the header subtitle does not appear off-centre.

Looks like a Firefox thing. I can send you some screenies if that helps.

31 July 2007 20:43 ***REBELFLIX*** said...

Thank you,
worked a treat

31 July 2007 20:49 Amanda said...

You're right, it is a FireFox thing, but is easily solvable! I just viewed the template in FireFox (usually I use IE-family's favorite!) and quickly spotted the problem!

For some reason when viewing the Layouts in Firefox, the whole of the template width does not display in the layout wireframe. However, if you scroll right to the bottom of the page, you can use the "crossfader" to scroll to the right of the screen and view all of the widgets in the right hand column.

This happens with all of the 3 column templates I've created. Unfortunately I haven't worked out a way to avoid this, but I'll give it a try!

As regards the description being offset, this is simple to fix: in the template there is a line beneath the #header .description line, there is a line which says: "max-width:700". Simply delete this line and the description should be centered again.

This happened because Firefox uses exact specifications in html templates, and had automatically aligned the description wrapper to the left (more a flaw of IE than of Firefox!).

Hope this sorts out the problems for you! I'll modify the template download to ensure the same doesn't happen for other users. Feel free to email me if you still have problems.

01 August 2007 16:51 Carter-Ann said...

Thanks Amanda! That fixed it. Just posted singing your genius.

04 August 2007 14:05 Brainstrained said...

Thanks for the hack. I've been trying to do this for more than a month with no luck, though I can see now where the previous errors or omissions were. Thank you, thank you, thank you!

08 August 2007 14:09 MindFul MiMi said...

Amanda,
This is exactly what I want to do but I get stuck in the beginning already as I cannot find the html code as indicated under your point 2. Can you help?
http://mindfulmimi.blogspot.com/

08 August 2007 18:03 Amanda said...

@MindFul MiMi:

I've been looking at the "sand dollar" template you are using, and I have to say it's rather confusing! The blog elements are not defined in the same way as other blog templates, and widths are defined as percentages rather than in pixels. While I've tried to create a second sidebar for this in my test-blog, I've had severe problems and think the whole template would need to be rewritten to accomplish this. That is, all blog elements would need to be properly defined within the css, and the media display settings adjusted accordingly.

It would probably be easier to make Minima look like Sand Dollar, than to make the third column!

I do apologise that I can't help more with this modification! Instead, I'll see if I can alter Minima to look like Sand Dollar instead, and let you know the method.

Best wishes,

Amanda

10 August 2007 15:10 Amanda said...

@MindFul MiMi:

I've found a three column version of the Sand Dollar template for download, which you can get here:

http://www.blogcrowds.com/resources/blogger_template.php/3_column

Hope this helps you!

Best wishes,

Amanda

11 August 2007 14:55 Seabra said...

Simply awesome. It worked finally and at the first try! I had try to other tutorials in two other blogs better ranked in Google and nothing worked.

You made it very simple for people like me with zero knowledge in blogging and changing html or what so ever.

Thank you so much :D

13 August 2007 19:46 sra said...

Hi Amanda! Your instructions were very easy to follow but somehow the third column in my test template never showed up - there's just a big gap between the main wrapper and the right sidebar, and I notice something called tracking. What's that?
The only deviation I made from your instructions was changing one widget name to HTML 4 from HTML 1 as Blogger objected to two HTML 1s (with the same name, that is) - there was an error message to that effect.
What has gone wrong? Please let me know - you can find my blog at testysra1.blogspot.com

13 August 2007 19:51 Nicole said...

Hello,

The 3 columns worked out a bit, but now my right column seems to be closer to all of my posts, causing too much clutter for readers. How can I adjust the original right column to move over more to the right and not be up against my Posts in the middle?

14 August 2007 00:25 Amanda said...

@sra:

I've had a look at the source code of your template, and can see you've made just a small mistake in your style section:

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

You forgot to put a hyphen between left and sidebar. It should look like this instead:

#left-sidebar-wrapper {
.....
}

It's such a small oversight, which I'm sure could be fixed if you just add the hyphen here. The code in the template itself (div id='left-sidebar-wrapper) is perfectly fine.

Try adding that hyphen and let me know if you're still having problems.

@Nicole:

To make more space, you'd need to add a margin to the left of your right sidebar-wrapper, and may also need to alter the dimensions of your outer wrapper slightly to accomodate this extra space.

The easiest way to do this would be to add the following code within the definitions of the sidebar-wrapper:

margin-left: 20px;

In this instance, you would need to increase the width of the "outer-wrapper" by 20px too in order to accomodate the extra margin space.

For a more detailed explanation of margins, take a look at this post.

Hope this helps!!

14 August 2007 08:17 sra said...

Hi Amanda, really appreciate the quick reply, and it helped, thanks a lot!

21 August 2007 10:54 T0m@ said...

hi amanda,

huge bunch of thanx for the tips, i've been lookin for a tutorial on how to change my stupid 2 coloum into 3.

I followed the instruction, at some level i made the new coloum.
the problem is the new coloum wasn't placed at the left side.. BUT BELOW the Blog Title bar.

did i do somethin wrong (obviously YES)

HELP
HELP
HELP

21 August 2007 11:47 Amanda said...

Hello Tom,

You seem to be using the Rounders template which is a little more awkward to change into a three column template because of the rounded sidebars!

In general, there are three things you should check: copy all of the sidebar wrappers in the style section (there are either two or three for your template) and add the "left-" prefix to them all.

Make sure the "float" section in the settings is aligned to the left, like this:

float:left;

Ensure that the "outer-wrapper" is increased in width to accomodate the width of your new sidebar. So if it currently is defined as "750px" and your sidebar width is 240px, change the width to "990" px instead. It may need to be a little wider to accomodate any margins you have in place too!

I know this is complicated, so feel free to email me if you need more help. I also have a basic three column template for the Rounders4 template which I could send to you if you like? This isn't the same color scheme as yours, but it is a similar design and could probably be customized in the "fonts and colors" section of your dashboard to look the same!

Hope this helps

Amanda

22 August 2007 03:39 T0m@ said...

Thanx Amanda for the direct reply,
since i am a total dumber about CSS or HTML code,

please just send me the coloums, or is it possible for me to send you my HTML code and make the changes for me? he he he

here is my email address
toma_gultom21@yahoo.com

thanx a lot and G' Bless u

regards

22 August 2007 13:09 Amanda said...

Hello again t0m@!

Later today I'll upload a three column Rounders template for download here. At the moment it needs a few tweaks to make it more "user friendly" as this is currently in use as a template I use on another blog. When it's done you'll be able to modify all colors, fonts etc to make this look like any of the four rounders templates available by default in your dashboard.

Check back for updates later, and I'll email you when it's ready for download :)

25 August 2007 13:07 BayingAtTheMoon said...

Had a lot of problems creating the 3 column template so I decided to try the simple template download as I use minima. It directed me to Page Not Found. Could you find it for me? Otherwise I will try to persevere with the instructions!

04 September 2007 03:05 Anonymous said...

Thanks Amanda.You rock!

13 September 2007 22:03 St. Charles Parish Library said...

these were the clearest directions i've ever read about these things! thanks so much. it worked out great for me.

20 October 2007 22:06 The Family Beckwith said...

THANK YOU
THANK YOU
THANK YOU!!!

This has been an Incredibly helpful tool!!!

21 October 2007 00:23 Amanda said...

@The Family Beckwith: you're most welcome :)

I'm glad this worked for you!

31 October 2007 04:20 CrazyKinux said...

Ok, I have to admit that you've got the best blogger Howto known to mankind! Your posts are clear, easy to follow, and answers every question one will have as there going through the steps.

This 3-column modification is the perfect example. I can't remember doing something so drastic to my blog, and being so comfortable doing it because I felt I though you were right there with me all the way through.

The end results is here.

Thank you so much Amanda!

02 November 2007 19:23 Amanda said...

Your blog looks great, CrazyKinux :)

Thank you so much for your comments! I'm really glad this helped you customize your template so easily!

29 November 2007 17:27 KaryaWan said...

Thanks very much for this easy to follow guide...I've changed my layout to three-column..The experience also makes me understand how the html works..
Thanks again..cheers!

11 December 2007 19:33 [.a.m.r.e.t.a.] said...

Hi Amanda! Thanks for this awesome tutorial, clear and easy to understand. I found your tutorial through Zimbio. Your step-by-step instruction really works! I just posted a link to your site from mine here :-) Thanks so much again!

22 February 2008 07:55 phoenix said...

thanks so much!!!
check this out!
http://www.gamingphoenix.com/

24 February 2008 03:17 worren said...

Now,I have one original Dot template and I would like to change it to 3-column-dot-template and i follow your instruction and reach copy and paste a new sidebar section.In original Dot template,there are 2#...One is #sidebar-wrapper and another one is #sidebar.Which one do i have to copy and paste? Dot template is not like other template .There are 2#sidebar-wrapper but the other have only one#sidebar-wrapper.
Could you give me some advice please?so sorry for weak english.

24 February 2008 05:59 PrairiePrimitivesFolkart said...

Thanks for the easy-to-follow instructions!!

25 February 2008 19:43 Robyn said...

Thanks so much for this tutorial. Very helpful.

My one problem: Now when I'm in the "template" screen, the right-hand bar of template items is partially obscured, so I can't access the "edit" buttons on any of my template items on the right. Do you know how to fix this or why it's happening?

Thanks!

25 February 2008 20:26 Amanda said...

Hello Robyn,

This is a wireframe issue in the layouts screen which usually affects those using Mozilla browsers (eg: FireFox).

Thankfully we can solve this using a few added lines in our template code. I write full instructions to solve these layout problems here. Hope this will help, but feel free to get in touch of you still need some help with this.

25 February 2008 20:45 Robyn said...

Thank you! This worked. You are very smart!

25 February 2008 20:51 Robyn said...

Oh, dear. I don't want to be a pain, but I have one more thing, if you have time. Sorry. My header is now a bit off the edge. Not a huge deal, but is there an easy fix?

http://www.roadyjane.blogspot.com

Thank you so much.

27 February 2008 01:56 E-Speed said...

Thanks so much for the walk through! I'm trying to create a club webpage that is also a blog and this helped immensely!

27 February 2008 16:49 Eastcoast Girl said...

Just wanted to say thanks. I have been trying to edit to the 3 column template for weeks. My html code experience isn't much, but I was finally able to successfully convert from the directions on your site. I have also been trying desperately to put the show/hide post summaries on my blog. No matter what I do, I can't seem to get it right. I am going to browse your blog now for other goodies. Thanks again!

28 February 2008 17:22 Adam said...

Amanda,
I must say this is the easiest tutorial I've come across. Thank you.

I have some problems though. Can you help?
My blog is http://azmacks.blogspot.com/
I'm having issues with
1) the spacing between the middle and right columns and it changes as you widen the browser window.
2) My paragraphs are not left justified but center justified. How can I chang all three to be left justified?
I just started this blog and want it "perfect" before I let people know about it.

Thanks again!!
Adam

05 March 2008 23:53 Cari said...

Thank you so so much!

28 March 2008 15:18 fiksi said...

hi amanda,

do you have any suggestion on how to create my right bottom column into widget?
so, i will have three widget column at the bottom of my blog.

thank you.

03 April 2008 21:41 Vaishali said...

Thank you, thank you, thank you! Your instructions were great and finally I have a three-column template!

17 April 2008 18:01 Fresh Fruits &amp; Vegies for Clatskanie said...

Yikes! I'm totally new at this. I tried getting this to work, I did get a space for an extra column, but my center column for main post is on the left side. Can you tell me what I did wrong? Thanks, Karen

21 April 2008 17:13 Amanda said...

For Fresh Fruits & Vegies for Clatskanie:

I've just taken a look at your blog and it seems you have a sidebar to each side of the posts. Is everything okay for you now or do you still need help with this?

24 April 2008 18:50 Atheris said...

I used this tutorial and got my 3 columns! But I have this space on the left- and can't seem to figure out how to get rid of it. I tried tweaking the outer-wrapper- thinking that I had that set much higher than the inner wrappers (header, sidebar and left sidebar) but that didn't work.

Does anyone know how I can get rid of that space on the left?
My blog is: http://camofishus.blogspot.com

Thanks!
Jo
Fremont, CA

28 April 2008 02:07 Amanda said...

Hello Atheris,

I have taken a look at your blog but can't see what you mean by this space. Have you managed to solve this already? Your blog looks just great to me, but feel free to let me know if you still need any help.

Best wishes,

Amanda

28 April 2008 14:43 funnelweb said...

Hi Amanda - ur a legend!! Only you could help me fix this!! I tried to follow ur instructions - and i thought i did very carefully - and went over it again and again. I just want the minima template with 3 columns

Here's my blog http://funnelwebmarketing.blogspot.com/

The right sidebar is still beneath the main section?? ...i'm lost now

Thanks again amanda

funnelweb

01 May 2008 13:13 ekonom said...

hi! i use rounders template and while trying to follow your steps, i havent found exactly the same codes, so i have "improvised" a bit and finally, new bar appeared, but not a left one but an upper one :) it's nice, i use it, however, i would like to have left one too :) do you have idea where is the mistake? i made this>
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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-wrap {
width:240px;
float:left;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
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 */
}
because i havent found any sidebar with float:right

02 May 2008 17:19 Lil The Edge said...

Hello Amanda...you really hit the spot with this post.
I found what i was looking for...but for some reason maybe im too retarded im stucked because instead by going to the left its on the top, bellow my header why?
And i already tryed to do soemthing about it but i dont know how to solve it.
I understand HTML but im weak at xtml so i don't know what to do...the only good thing is that the width is 880 lol...
my blog is http://achtungedge.blogspot.com/

i can only put the widgets at the top or at the end of the the blog bost is weird... but not to the left... cna you guide me please?

03 May 2008 09:05 funnelweb said...

Done!!

Thanks Amanda - I copied someone else's code you had already fixed and played around with it...
Awesome - thx again

funnelweb

04 May 2008 11:19 fid said...

thanks :)

08 May 2008 02:29 DZFANTASY said...

Hi, Amanda

I just tried changing my template to the 3 columns and I'm not understanding something, I guess. I only succeeded in shifting my posts to the left and other column to the right with a space in between.

Here is what I have right now..

#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 */ }

}
#left-sidebar-wrapper (this makes the css for this section unique) float: left (this will make the new sidebar float to the left of the main column)

What the heck am I doing wrong. I'd sure appreciate some help with this.

My blog is: http://dzfantasy.blogspot.com

THANKS MUCH

dz

11 May 2008 16:27 steitzfitness said...

Hi Amanda! I followed your instructions but my new column is still under my main section instead on the right side. I put a picture in to see where it is (I am in the middle of transerring my blog to blogger~so there are no posts yet)
My blog is www.ourdulcedomum.blogspot.com

Thank you for your time!!!!
Renee

11 May 2008 20:35 steitzfitness said...

I meant to say *instead of the LEFT side, not right;)
Thanks!

14 May 2008 02:52 Lil The Edge said...

steitzfitness:

Hey i had a simillar problem on my blog check my bog now is correct i could fix the problem...so follow the instructions by amanda but copy my code and it will work ok?
I did that with some one elses blog around here...because i was going nuts...

take care,
anything else im around

15 May 2008 08:23 Z'riz said...

Hi Amanda! I followed your instructions to the letter and I have three columns! thanks a lot!
But I do have one problem, however. I can't place an image to my header. The image uploads and is saved instead of the Page Title and Description bur it doesn't seem to appear on my blog. Did I do something wrong? thanks!
my blog is http://betterthanezrah.blogspot.com

15 May 2008 08:36 Z'riz said...

hi Amanda! I edited it again and it is now working fine! thanks! your tutorial really helped!

17 May 2008 21:44 Eirc S. said...

I love your site. Has the best info out there, glade I found it.

One question, I have a three column template downloaded from Info Creek. The two side bar columns are on the right, and nice and small, great for adds and badges. I would like to add a wider section on top of these two side bars kinda like your blue steel magazine template. Is there a way to do this, I have basically no HTML knowledge, but can cut and paste just fine.

PS. I use your magazine layout on another of my blogs, and love it, great job.

18 May 2008 02:19 Brian McElhinny said...

This is exactly what I'm looking for. However, I followed the instructions and when I preview it, it looks like the new sidebar is also on the right. I can't figure out what's wrong. Any help appreciated

http://raisethejollyroger21.blogspot.com

24 May 2008 10:08 e s t a n c u s said...

Oh my gawddd... You're my saving grace! Bless you.. Thnks for such a wonderful tutorial... makes life easier for not-so-smart people like me.. lolx.. kudos to ya!

*bows*

;-p

25 May 2008 00:22 Cathal Breathnach said...

Thanks very much for all the help! I was wondering for a while, could I get a three colummed blogger template?

Thanks again

27 May 2008 11:12 itgel said...

tnx ! see my blog ge3k-itgel.blogspot.com . i need to move my sidebar. which is placing the chat widget. i need to move to the left side of the mainsidebar how can i do that ? help me !

30 May 2008 20:06 ChichiBoulie said...

Hello! Thank you for this post. I'm hoping you can help. I think I've followed the instructions and added the elements. On my Page Elements, I have 3 columns, but I am unable to edit my new column. Any suggestions? I don't know where else to go for help!

http://www.boulieblog.com

Thank you again

30 May 2008 20:21 Amanda said...

For Itgel:

I think the easiest solution would be to change the "float" of the #rightsidebar section from "right" to "left".

This float is contained in the following section of code:

#rightsidebar
{
margin-top: 0px;
margin-left: 0px;
width: 125px;
margin-right: 4px;
margin-bottom: auto;
padding: 0px;
float: right;
}

Make the line in bold say "float: left;" instead, and this should change the column appear on the left instead of the right.

You may also need to change the float of the #leftsidebar section from "float: left" to "float: right" too (I just looked at the source code and realized this).

Hope this will be useful for you!

For ChichiBoulie:

Are you able to see the right hand sidebar on your Page Ekements page? If the "edit" links are hidden behind the right side of the page, you may need to scroll down a bit, then look for the slider which should allow you to scroll right too.

If this doesn't solve the problem for you, let me know and we'll work on the problem for you :)

06 June 2008 14:23 Half-an-Acre said...

HELP! i did exactly as you said and it hasn't worked. managed to work backwards and undo it all... how can I get the third column in? what do i do now?

08 June 2008 01:22 Radi said...

Hi Amanda. Your tutorial is really great :)
But actually I have problem. I've done every step in your tutorial, but the left side bar never appear.

Just check the blog : http://qzmlp.blogspot.com/

08 June 2008 01:29 radi said...

Nevermind. I spot my mistake.
Thanks for this tutorial, Amanda. It's great :)

19 June 2008 00:12 Vista Guy said...

Hi Amanda! ,hanks very much for all the help

19 June 2008 21:27 Ashley said...

Your tutorial is AWESOME!!!!Thanx a bunch!!!!

22 June 2008 02:32 Ozo said...

This is the best Space Optimizer for blogger! thanks a lot!!
wii4everybody.com thanks you!!

22 June 2008 07:37 欣颖 said...

How come I can't download minima template. FYI, i m very new to blogger. downloaded ur new day template but i thk i prefer 3 column layout.. So, meaning tat i need to download the minima template and remove the new day template right?? but i hv problem in downloading minima. thks for helping.

25 June 2008 02:41 Specialkalle said...

Wow, I'm a complete idiot at this stuff, and I was amazed when it worked! You're great! I love you. Thanks so much.

27 June 2008 13:31 Aly said...

Thank you SO MUCH!!!! This is the best 3-column tutorial on the Web. You really helped trulybeautifulonline.com become the best it can be! =)

-Aly

01 July 2008 23:10 killertu said...

love it thanks now they don't have to go all the way dow keep up the good work

03 July 2008 03:07 Tinh said...

great, thanks for your tips, I will give it a try now. T

05 July 2008 00:10 beadinbythesea said...

It took me a little while but I finally figured it out. Thanks so much!

05 July 2008 22:33 stripeymonkey :) said...

hello amanda,
i have tried to follow your instructions twice but still don't seem to be able to get it! your instructions seem really clear but i keep getting my two sidebars together to the right of my post not one each side
please help if you can :)