« Why Would You Want to Disable Comments or Trackbacks Site-Wide? | Main | Comments Feed Fixed! Yay! »

John T. Unger

Creating a Three Column Layout with the Post Column Aligned to the Right or Left Side of the Page

John T. Unger April 3, 2006

Graham asked a great question recently on the Frequently Asked Questions page:

I'd like to know if there is an easy way to make a three column design with the main post column being on the left while two list columns appear on the right?

If you are comfortable with using advanced templates, or even if you're just good at following instructions, it won't take you more than a few minutes to change your blog layout so that both sidebar columns are on the same side of the page. I suggest starting fresh with a basic template to make most of your design choices the easy way before converting to advanced and changing the positioning of your columns.

Some people might want to position their main text column on the left, some on the right. Some may prefer fixed width over fluid for the text column. Some like to have the side columns separated with a rule or by changing the background color. These are all choices you should make before converting to advanced layout, if you're not 100% comfortable with editing your template code directly.

Probably the easiest way to make this clear for everyone is to state the beginning settings, the desired settings and walk you through the process I used to create the layout. If I explain clearly enough how it works, you should be able to use this example to build any three column layout you desire by making the right choices at each step. The image below is what we're going for in the tutorial:

 

Photo

Click on the extended post link for full instructions.

To create a three column layout with the post column aligned to the left side of the page and two list columns on the right, follow these steps. You must have a TypePad Pro account and be using advanced templates in order to use this Hack.

TypePad identifies the components of your page by assigning classes to them… In a 3 column layout, div id="alpha" signifies the left-most column or sidebar, div id="beta" signifies the center or text column, and div id="gamma" is the right-most column or sidebar. I found that the easiest way to change the layout was to swap the content for the alpha and beta classes and then edit their width and position in the CSS template.

1. Go to the Design tab for the blog you want to edit.

2. Select an existing standard template or create a new one. Select "3 columns" from the Change Layout option under Your Theme & Layout. Save.

3. In the Your Content area, select the Typelists you wish to display from the Change Content Selections option. Arrange your Typelists in the Change Ordering option. Save. (note: Change Ordering displays the sidebars on each side of the main text area. The selections you place in the left sidebar will apply to middle column when we are through).

4. Go to the Change Theme option under Your Theme & Layout. Make style selections for fonts, colors, header etc.

Keep in mind that the styles you apply to Left Column will define your text area and styles applied to the Main Content Column will apply to your middle column. If you plan to use rules or colored backgrounds for your sidebars, you'll need to take this switch into consideration so that your rules show up in the right place.

Design_general_page_settings

When you are happy with your style selections, click Save.

5. Convert your basic template to an advanced template and apply the advanced template to your blog. Don't delete the basic template yet, in case you decide to make further changes. The layout of your blog at this stage should look something like the following:

3columnbasic

6. Go to the Design tab. You should see a list of the templates that make up your advanced template design. Click on the Main Index Template. A few lines down, you'll find code that looks approximately like this:

                        <div id="alpha-inner" class="pkg">
                            <!--#include virtual="/<$MTBlogDirname$>/sidebar1.inc"-->
                        </div>
                    </div>
                    <div id="beta">
                        <div id="beta-inner" class="pkg">
                            <$MTWeblogIncludeModule module="entry-list"$>
                        </div>

7. Switch the code between <div id="alpha-inner" class="pkg"></div> and <div id="beta-inner" class="pkg"></div> so that the code now reads:

                        <div id="alpha-inner" class="pkg">
                            <$MTWeblogIncludeModule module="entry-list"$>
                        </div>
                    </div>
                    <div id="beta">
                        <div id="beta-inner" class="pkg">
                            <!--#include virtual="/<$MTBlogDirname$>/sidebar1.inc"-->
                        </div>

All you need to do is cut and paste to swap the sidebar1.inc line with the entry-list line. Very easy. No sweat. Click save.

8. Above the template code is a drop-down menu that lets you easily navigate from one template to the next. It reads Select a Template to Edit. From the menu, choose your Archive Index Template. The code is different, but again, all you need to do is switch the code between the div id="alpha-inner" class="pkg" tag and the div id="beta-inner" class="pkg" tag. Click Save.

9. From the edit menu, go through and make the same changes to your Category Archives, DateBased Archives and Individual Archives templates. Click save for each one. Each has slightly different code in the same basic format, so for each one just switch the code between the alpha-inner and beta-inner tags. When you've done all the templates, click Publish Weblog.

10. View your blog (but don't panic yet). We have one more step. We need to adjust the CSS so that the columns display at the proper widths. At this stage, your blog will look something like this:

3columnbefore

 

11. Go back to your Design tab and click on  the index template named Stylesheet. You might want to edit this in a text program or html editor, but it's fine in the window too. Scroll way down to almost th end of the code until you see the line that reads: /* three-column tweaks */. This is where you can edit the width and position of each column.

Find the line that says layout-three-column #alpha . Directly below it will be a tag for width that is set to a pixel value. Replace the pixel value with the word auto, so that it looks like this: width: auto;

Find the line that says layout-three-column #beta . Below it will be a tag for width and margin left. Replace the width with a pixel value, and change the margin-left to read auto so that it looks like this:

width: 200px;
margin-left: auto;

Click save. Republish your blog. And marvel at your super groovy new three column layout! It should look something like this:

3columnafter

 

12. You should be all good to go at this point, but if there are any design elements that bother you about the color, style, etc of your columns, you should be able to easily identify the code for borders etc in that last few paragraphs of your CSS template.

More Like This: Advanced Templates , Hacks for Layout + Design

Comments

Seshu says:

Just brilliant and may I say timely? I am going to be changing my blog - TIFFINBOX - to this look and this is excellent. Thanks man!

john t unger says:

Seshu,

Cool, glad you like it! I even figured this one out by myself for once (usually I have help).

Let me know when you change tiffinbox over and I'll update the post with a link, so people can see a live version of the layout.

Tom G says:

I was with you through the firs ten steps, however, once I began to edit the stylesheet, I couldn't get the three columns to sit side by side. The two narrow columns would always sit lower than the main content column....Any idea where I may have gone wrong?

Tom G says:

Check that, I made it work, but I had to play around with the pixel sizes of things a bit, rather than just using "auto"....This is what worked:

/* three-column tweaks */

.layout-three-column #container
{
width: 900px;
}

.layout-three-column #alpha
{
width: 495px;

}

.layout-three-column #alpha-inner
{
border: 0;
padding: 15px 15px 15px 15px;
background: #FFFFFF;
}

.layout-three-column #beta
{
width: 195px;
margin-left: auto;


}

.layout-three-column #beta-inner
{
border: 0;
padding: 15px 15px 15px 15px;
background: #FFFFFF;
}

.layout-three-column #gamma
{
width: 195px;

}

.layout-three-column #gamma-inner
{
border: 0;
padding: 15px 15px 15px 15px;
background: #FFFFFF;
}

Jeff says:

Probably a dumb question, but could you copy the resulting stylesheet in the advanced configuration and then paste it into the CSS deal on the standard layout and achieve the same thing?

duckster says:

Aaaah. Nailed it. Thanks so much for the tip. Check out the blog for the new look. Now if only I could figure out how to get the dark blue border off the images in the far right sidebar...

john t unger says:

Jeff,

The new design looks great!

The border on your images is easy to get rid of. Right now, your code reads style=border:1. Change that to read style=border:0 and you'll be good to go.

duckster says:

Perfect!!! Thanks so much!! I really appreciate it!

jlt says:

Well, I'm trying to do this with a powell street template converted to advanced, but unfortunately there is no /* three-column tweaks */ area in the stylesheet ... any ideas on how to get it to work? I got to the very last step and then ... ARggggh!

http://www.urbancartography.com/

as usual, typepad's templates are wildly inconsistent... great.

john t unger says:

jlt,

Most of the hacks work best if you create your initial layout from scratch in the design wizard and then convert to advanced. The standard designs from TypePad are provided to allow people to get a blog up and running without much tweaking and so may not include all the code that would be generated for you when you convert from a customized basic template.

w. shaWn oSborNe says:

I have been trying your hack for the past couple of hours. The changes are accepted up untill I get to the individual archives. When I make a change here and try to save it, an error message is generated. I cleared all changes several times and started from scratch and expereinced the same problem. Please advice. Many thnx. w.So

Marv says:

This is not working. I am getting error messages when I attempt to publish. Please help me get this to work correctly.

Marv says:

Please show me how to do this using Typepad's custom css.

Babs says:

thanks for this tip. but the post area is not falling in line. i have done exactly what you said and even tried to edit the pixel sizes but its still over;apping. pls help me. i need to promote this weblog ASAP. thanks.

Dan York says:

Thanks for the great tip. I did have to make one change to it, though, in order to make it work. When I just changed the alpha width to "auto" in the Stylesheet, my first column went all the way to the edge of the browser window, so that my two sidebars were effectively floating on top of it. However, when I set a "margin-right" for the alpha column that was equal to the width of my two sidebars, it all worked fine. Here's the relevant section for the alpha column within my "Stylesheet" file:

.layout-three-column #alpha
{
width: auto;
display: block;
position: absolute;
float: none;
left: 0;
top: 0;
margin-right: 500px;
}

You can see the last line that I added. In my case I have one sidebar that is 200px and a second that is 300px, so I put 500px in there for the margin-right and it all worked fine.

Thanks again for the tip.

john t unger says:

Dan,

Thanks for sharing the correction that worked for you. The three column layout looks great on your blog!

lilyruth says:

Hello I wanted to tell you I really like your site it is great, keep up the good work in helping the rest of the bloggers with useful tips and listen if you want to make some money on-line go to http://www.cashquests.com this is Kumiko new domain and she has a lot of tips to offer about bloggin and how to make money-on-line.

Chris says:

Now that TypePad has a three column right layout available, I'm wondering if there is an easier way to to a three column left layout. I still want to be able to use the TypeLists.

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d834b5b1db69e2

Listed below are links to weblogs that reference Creating a Three Column Layout with the Post Column Aligned to the Right or Left Side of the Page:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License