Thursday, July 10, 2008

How to widen your columns on Blogger

I have always wanted my main column wider. I just didn't get why it was so small with all that extra space on the left. I thought I wanted to go with a 3 column layout, but I decided against it. I think I like this better. Here's a tutorial on how to change to a 3 column layout.

Here's what I did to widen my main column and header. Let's start with the header.
Go to Customize, Layout, Edit HTML. Scroll down until you see this (although your number that is in red is probably 660 or something.)

#header-wrapper {
width:950px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

Change the header width number to 950. (I don't know why 950. That's just what I found online when I was looking at how to do it.)

Now scroll down aways until you see this:

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;

Again, your number is probably 650 or 660 (I can't remember what it was originally.) Change this to 950 too.

One more thing. So far we've changed the actual blog space. Now we need to change your main post column. Scroll down to this:

#main-wrapper {
width: 650px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#3d310b;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;

I think the original number was lik 410. It should be changed to 650.

Now, click Preview and see if your space has widened. If you love it, Save Template. If you hate it or something didn't work, exit without saving.

This is the site that helped me the most. It goes through the steps I showed you above, along with how to make your sidebar wider (which I decided not to do) or how to change to a 3 column layout. I think it's a little easier than the first link.

Let me know how it goes!

Pin It!

97 comments:

Rhea said...

Love the wider look! It really looks great. Good job and thanks for sharing how with us!!

Kimberly said...

I'm really liking your layout today! BEAUTIFUL!

WheresMyAngels said...

Thank you so much girl! I have been wondering how to do this.

Finding Normal said...

THANK YOU! You make it look so easy! Let's see if I can do it too!

John Deere Mom said...

It was easy! Just remember to preview and exit completely if it doesn't work. Are you leaving tomorrow? Sunday?

Finding Normal said...

YAY! It worked! I'm not up to the widget thing yet, since I'm semi-happy with my background. And you know how I hate browsing for them!
Sunday!

Anonymous said...

Well, I'm not on Blogger, but I had to say I love the new look! Wider column, new banner, background and all!

Insane Mama said...

I like your new look and thanks for the directions, I really don't like my site layout and have wanted to fix it for some time. I also love your template

WheresMyAngels said...

For some reason it made my header go to the left and not spread it all out. But it did widen the columns.

Hippie Family... said...

cute....did you learn this from Z's mom? I was just reading over her stuff and have been begging her for a while to post and you both did within hours of eachother..
great tips.

John Deere Mom said...

Hippie family-Yes! I read through her stuff and found the site that I ultimately understood how to do it! Thanks for stopping by!

Where's my angels-Not sure why it made your header go to the left...

Insana mama-Thanks! It's really fun to do!

Beth-Thanks...I think I will keep this one for awhile.

Jill said...

I was just thinking about getting motivated enough to look for instructions on how to do this :) Thanks for letting me be lazy today

Mama Dawg said...

I bow down to the blogging goddess...your steps were so simple and so easy and so...so...so...perfect! I just did it myself and what a difference it makes.

May a thousand butterflies kiss your toes.

(I have no clue what that means, it just sounded funny).

Anonymous said...

This is an excellent tutorial, Angie! I wanted just this before I caved and had someone do it for me. Thanks; I'll keep it in my files.

Anonymous said...

Much more efficient then randomly changing numbers. Was able to go directly to the code and change it. Thanks!

Unknown said...

You rock!

John Deere Mom said...

Jblieu-Great! Glad it worked!

Mrs. Parks-Thank you, thank you very much.

Carrie said...

THANK YOu so much!!! I just did this to change the layout of my blog! Worked like a charm! I really appreciate the help! Now I just need to create a larger header!!

Carrie said...

ps... the blog I changed was:
www.2livinglightly.blogspot.com

thanks again!

Carrie @ Heart of a Servant
www.2livinglightly.blogspot.com

Juice said...

This is awesome. :) Thanks!

MonieG said...

Worked great. Thanks!!

Makave7i said...

You a life saver thanx so much!!!

Aicha said...

Yay...thanks a whole lot!

LaValle Linn said...

Many thanks for posting this. I saw a different blogspot site this morning. It look wonderful. So I did a search on "html widen margins blogspot". Your instructions worked beautifully.

Brenda said...

Hi,, I like the rest wish to thank you for the simplistic steps to change the width of my page. http://gyr-gt-lee.blogspot.com

I picked your link out of my google search and am I HAPPY I did! Thanks, Brenda

Melissa said...

I just wanted to say thank you for posting this info. I found it while searching Google and appreciate how you gave me the steps to fix what has been annoying me for eons. Have a great day! :-)

Secretary Diaries said...

Hi
Thank you SO much - I have been trying to change the width of the columns for ages - your steps are so easy! Thanks again and have a fabulous day :-)
Shana
www.secretarydiaries.blogspot.com

Meg said...

Oh my gosh!! Thank you so much! Just started fiddling around with my layout and it went horribly wrong until i found your post! :)

Meg said...
This comment has been removed by the author.
Jeni said...

If you were here at my house you would here me clapping with excitement. Thanks so much for this easy tutorial. It took me all of 45 seconds to make these changes!

Impress Mekuh said...

Thank you three much! this worked perfectly!

Lauren Nicole said...

you explained it the easiest for people like me, and it worked! thanks!

suzannah | the smitten word said...

thanks so much! perfect:)

Ted said...

hey, thanks for this. you did a great job - the no-nonsense little things like the red pixel number changes made this the most helpful guide I could find on the subject.

Lydia said...

Thanks for the tutorial!

My Dog-Eared Pages said...

Thank you so much!! Clear and perfectly precise!

Anonymous said...

This helped display my video's without cutting off the side PERFECTLY! thank you!

Jen @ Sunshine4Teachers said...

Thank you SO much. The new MeFiles that you can earn money with have to be 234 wide, so this just perfect for me. You are an angel! And by the way, I love you colors and header, did you do them yourself?

Xyrus said...

Hi im new at blogging this helps a lot thanks for the tip and code pls. if you need any softwares or freeware visit my blog @ pinoysoftwares.blogspot.com


thanks again

Fashion Without Guilt said...

Thank yuo so much I need this. I like the way my site looks now.

Check it out at http://www.fashionwithoutguilt.com.

Thank you again.

Tracy said...

i hate the plain blogger template but my brain shuts off when trying to learn html. so thank you very much for making this extremely simple and painless!

Anonymous said...

Thanks so much for your clear and helpful instructions! I love my new wider blog!

Young Mr. Brown said...

Thanks for that. I never knew how to do this before.

nia said...

wow that was super easy. Thanks! i actually checked other peoples instruction & they scared me :p Thanks for the simple instructions.

Unknown said...

It doesn't work for me because I don't have the same html code that you have. Which is surprising, but it seems that's the way it is...

Anonymous said...

Thanks so much, this was really helpful, especially since I am new at blogger and blogging in general!

Rob Ross said...

Thank you very much. This has been bothering me greatly and I plan to fix it right now!

http://howtobeateacher.blogpsot.com

WriteSmart author said...

Thank you so much. I am technologically unsavvy, but I managed to do EXACTLY what I wanted with my blog through your post. Thanks again!

Christine said...

thanks alot!!! i did the same thing and now my blog looks a lot nicer!! thumbs up!

KG said...

Great advice, friend! I've used your tip to fix my blog as well...kudos!

Teresa @ good-grace said...

oh my gosh!! You are AWESOME! Thanks for sharing how to do this. It was sooo easy! :) Much, much love to you!

Anonymous said...

This is exactly what I was looking for, thank you! :D

Nicole Feliciano said...

Very helpful! Thanks!

Anonymous said...

RX Pharmacy Online. Get Cheap Medication online. Buy Pills Central.
[url=http://buypillscentral.com/news_en-us.htm]Get Top Quality Viagra, Cialis, Levitra, Tamiflu[/url]. canadian generic drugs. Cheapest pills pharmacy

Ace said...

xxxooo Thank you for the easy to follow directions!!

Good karma to you :-)

O n T Schrock said...

Awesome! You're a huge help!

Momma said...

Thank you so much! I googled "how to make blog post space wider" and found your easy-breezy instructions. Great job!

Sarah Jane said...

Thanks! Very helpful! Now I just have to figure out how to make my pictures bigger!

Gwen Owens said...

WOW!!!! THANKS SOOOOOO MUCH! Your header has totally inspired me by the way too... I'll have to get my up to par! Really clear instructions my sister showed me your blog post here. THANKS A MILLION!!!!

Gwen Owens said...

Sorry... I have one more question. I love how your background is light blue but your side bar and the center section are white. How did you do that? Could you email me if you have the time? THANKS!!!
gwenethowens@yahoo.com

Kimmie said...

Thanks so much!! I am excited to apply this change to my blog, however, I will have to figure out a different background as my wording is running into my background now, so until I get that figured out I will change it back to the original.
Thanks so much!!

Keir said...

Let me add my thanks as well! I've visited a lot of sites but your info was the most specific and helpful.

Unknown said...

A friend sent me the link to this post and I just wanted to say thank you! Your instructions made it so clear and easy! I really appreciate the help!

Speckle of Dirt said...

Thank you so much! I followed your directions, exactly and it worked!

Charly said...

Thank you this was soo helpful, I could never understand the narrow columns and empty space!

GeeMacphoto said...

cheers,

thanks for the help

-g

Josh said...

Awesome. Thanks so much!

Anonymous said...

Thank you! I love it and you made it very clear on what to do!

The Iron Edge said...

i fixed my husband's blog using this tutorial! thanks! :)

(i had a "prof" do my blog!)

Julia
www.workwifemomlife.com

Hubby's
http://theironedge.blogspot.com/

Fit said...

Loved how easy that was!
Thanks for the instructions!

inhahe said...

My template doesn't have a #main-wrapper :(

inhahe said...

I can't get it to look right. Since I don't have a #main-wrapper I tried changing "main", but everything just leaks out of the window.

The Nonpopulist said...

Thanks, now my blog is sittin' PHAT!

Anna said...

Thanks for the incredibly simple to follow guide

matty said...

lifesaver, ive been trying to find out how to do this easily for a while, many thanks!

Ven said...

You are the best!! Thank you!! See how this worked: allnaturale.org

Karen Steffano said...

nks- I have managed to change my blog thanks to your post!
Karen Steffano - Fine Artist - South Africa

Endy Daniel said...

awesome! it works! thanx

Paul Bishop said...

Awsome! Thx!

Anonymous said...

Can I just say I'd love to pay you about $1,000 for this fabulous post of help! Now I've just gotta "clean" things up a bit, but I'm so excited about my new wider space! Thanks so much for taking the time to share . . . I'm so grateful!

Marie @ Chocolate-Covered Chaos said...

I found you in a search for "how to widen blogger column". Thank you so much for your help! I played with the numbers a little bit to get the look I wanted. I've been wanting to widen my post column since I started my blog but didn't want to lose my template design. Love it! Thanks again!

Cynthia said...

Thank you for sharing this information, it worked great!

Lauren B said...

Thank You! This did work good for my text,etc. However, I have a downloaded template. Is there any way to fix that so everything doesn't fall out the sides?

Mrs. Jones from the Circus said...

I found you by googling for directions to widen my columns in blogger. Thank you so much!!!

il sognatore said...

I can't thank you enough, this was really helpful :)

Derek said...

Worked like a charm. Thanks.

Umar Nadeem said...

great work its really to good keep it up man regards

Urdu columns

Anonymous said...

Thanks so much for the info! Very helpful!
D

OpusMuse said...

Thanks so much for the tip, it looks much better now! *big smiles*

Maintain said...

thanks heaps dude... champion..

Edna said...

SO GREAT AND EASY BUT i HAVE TO CHANGE THE SIZE OF MY BACKGROUND AND HEADER. IF I FOLLOW YOUR TUTORIAL WHAT SHOULD MY BACKGROUND AND HEADER SIZE BE? HOPE YOU CAN HELP ME

BlueCat said...

Fantastic!
Thank you very much.

OSOS KAHLA said...

I really like ur blog and I think u will put more posts so its very useful man

keep it up

Urdu Recipe

SEO said...

This kind of information is very limited on internet. . this is very nice idea.Thanks all for the useful information.
Wallpaper Download

Ans said...

Yes! I loved it and I saved it! Thanks a lot!

Ans

Yuri said...

OMG thank you so much for this post! U have been trying to change my blog width for years but always got confused with all those tutorials out there because i/m not familiar with html.

Your post is THE most easiest to understand of all the other websites and I finally can understand how to make it wide.

I now have a blog template that I've been wanting, thanks to you! :D


Check out my Fashion & Beauty blog:
http://twothousandthings.blogspot.com

Anonymous said...

GREAT! Thank you