Adjusting Three Column Margins in Layout
In the earlier related post, your faithful servant showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.
This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.
Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.
In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.
Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!
First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:
/* Outer-Wrapper
----------------------------------------------- */
Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:
margin right:
margin left:
First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:
margin-right: 10px;
margin-left: 5px;
Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:
margin-right: 15px;
margin-left: 15px;
Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:
margin-right: 5px;
margin-left: 10px;
Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:
#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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;<-------change to 185
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}
Your finished block of code with the new margins should now look like this:
This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.
Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.
In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.
Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!
First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:
/* Outer-Wrapper
----------------------------------------------- */
Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:
margin right:
margin left:
First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:
margin-right: 10px;
margin-left: 5px;
Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:
margin-right: 15px;
margin-left: 15px;
Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:
margin-right: 5px;
margin-left: 10px;
Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:
#left-sidebar-wrapper {
width: 220px;<-------change to 185
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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;<-------change to 185
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}
Your finished block of code with the new margins should now look like this:
#left-sidebar-wrapper {
width: 185px;
margin-right: 10px;
margin-left: 5px;
float: $startSide;
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 */
}
#main-wrapper {
width: 500px;
margin-right: 15px;
margin-left: 15px;
float: $startSide;
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: 185px;
margin-right: 5px;
margin-left: 10px;
float: $endSide;
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 */
}
Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.
Update: There are a lot of comments below about not enough space between columns, too much space, etc. These are personal preferences and they can easily be met - the great thing about the Blogger templates is that you can customize them to your heart's desire. Experiment! Just fiddle with the margin settings until your blog looks the way you want - it's easy. More pixels in your margins=more space between columns, less pixels in your margins=less space. Be careful not to add too much though, or your right column will drop to the bottom of the page.
Also, several people made comments about images/widgets/photos getting cut off in their sidebars - again, you need to either reduce the size of the image/widget/photo to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget. But be careful: if you make it too wide,your right column will drop to the bottom of the page.
Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! If this post was helpful, please link to it! Cheers.
Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! If this post was helpful, please link to it! Cheers.
Labels: Layout Version, Margins, Three Column Minima

143 Comments:
This is great, I just have one problem. My three columns have two smaller sidebars on the left and the main blog area to the right. I'd like to have the main blog area in the center with the sidebars flanking it. I can't figure out how to remedy this. Please help. Thanks.
I did it with a test blog and it worked GREAT! Thanks (Haven't tried it on my main blog yet). But my problem is that it wants to delete all my widgets. How do I copy the widgets over so they aren't all lost? THANKS!
You are a god and I'd like to kiss you full on the lips!! THANK you!!
Patrinila, glad you got it figured out. Great looking blog, by the way.
Kate and crew: the nice thing about modifying what you already have is that you don't lose ANYTHING, you just move it around on the page.
I looked at your blog, and you have at least one widget there that probably won't fit in a 185 wide column. So, in order to make room for the margins, just keep the sidebar widths at 220 and increase the total page width by 70 pixels instead (add 70 to 940 and make your outer wrapper and footer 1040 pixels wide). If 1040 is too wide, make it 1020 and reduce your sidebars to 200. Just make sure it all adds up, in terms of pixels.
I hope that works and good luck with the garden! I love heirloom tomatoes....
Your are indeed a Godsend1 Thank you so much!
Hi there! I added a third column -- THANK YOU SO MUCH -- but now I'm a bit clueless as to how to move over my blog roll from the right side to the left and add how to add new widgets. Is there any sort of guide? When I tried, all of the body of my blog bumped down below the left column.
MUCHly appreciate your help!!!
thank you so much :)
cant believe how easy you made it!
Tamron Lohan - you mixed plaids and stripes, girl...I want to vom just looking at it. You have a 200 wide right column and a bunch of stuff at the bottom that is much wider, so of course it won't fit! Get rid of that 336 pixel wide adsense unit at the bottom of your 200 pixel wide right side bar. As soon as you do: le voila! A new three column blog for you chica! If you want to replace it, use the 160 or 200 wide adsense unit.
Cheers, RW
THANK YOU. I had been trying to do this with instructions from betablogger for dummies. I was too dumb I guess. With your instructions I was done in less than 5 minutes and confident enough to hit save. One problem...the description lost it's centering. Thank you again. I wish I would have found you first.
Thank you!! Worked perfectly.
Thank you for the best instructions! I got everything pretty well set up but I can't seem to get everything aligned or centered ... could you tell me what I did wrong please? Thank you!
hi! Struggling with my page. Can you help me, please? When i add images in my sidebars, they acquire different dimension (bigger on the left, smaller on the right one). I do: add image, then when it says "shrink to fit", i get two different pixel values for the two sidebars i have (210, and 150), so that images results in different size, while i want to have them equal on both sidebars. I tried following your instruction, but i got stuck 'cause it seems in my html i dont have the "left-sidebar-wrapper"…weird. I belive I have a minima templte, 3 columns.
What I would like would be to expand a bit both lateral bars, keeping their size equal.
I hope you can give me some hints.
Thanks so much for looking into this!! Matteo.
Hi Mateo, you are not using a blogger template, it is a third party download, so I don't know what the problem is. But I have a suggestion: your sidebar width is 210. If I were you, I would manually resize the images in photoshop to 200 pixels wide, and then upload them as is.
Thanks again! You saved me so much time and heartache. ; )
excellent...i'm new to this and you've made it really simple!!!...thank you!!
Christopher
Hey guys. Who do I get my whole imeem player to show up similar to this blog Charleshamilton.blogspot.com. Thanks.
I adjusted my margins. It looks great!
Is there any way to move my left and right columns closer to the page's edge? Seems like there is lots of unused space on the ends.
THANKS!!!!!! <;p]
Ice pony - I think what you are interested in doing is increasing the size of the entire page. To do that, increase the width of the header wrapper to whatever you want, say 1024 pixels, and also the width of the content wrapper to 1024, then add an equal number of pixels to your main column. If you went from 940 to 1024, you'll need to add 84 pixels to your main column (1024-940=84). You can also divide the added pixels between your sidebars and the main - for example add 20 pixels to each sidebar and 44 to your main, for a total of 84. Don't forget to change the "max width" setting to 1024 also. Good luck!
May you be blessed and rewarded for these instructions. How wonderful of you to share them! Thank you so much. You are very generous, not to mention very smart. Thank you again.
A thousand thanx... i've tried a 3 cols template, but margins were not ok... With your method my blog now looks as i want it.
RW...oh boy. You've given me a math problem and my head is spinning. I'll have to think carefully about this and try to figure it out. Thanks!
You just saved me some $$$. I was going to hire someone to do this.
THANK YOU!!
RW, You did it again brother. Brilliant and clear tutorial...you da man!
I included your link in my "link chain"
Cheers!
Hey Angle - thanks for the link!!
Haha! It worked perfectly! Wow, I wish I'd found this blog sooner. Your information is great.
Thank You Thank You Thank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank YouThank You Thank You
You my friend get a link on my blogs
This is a great blog and I'm so happy I found it! Ok, I must admit I don't need 3 columns for my blog, which features my photography (so I want to maximize the width of the content space). All I want is for the sidebar on the right to show up properly! It floats to the bottom of the page and I've tried your advice on increasing space page but I think I'm missing something. Can you help? I basically need the posts to be about 800 px wide for the photos and then just a single sidebar flowing along the right side. Thank you thank you, this would be a lifesaver!
Hey Jessica, you've got the right idea, just a few wrong numbers. You already set the width of the page to 1050, so I'm assuming that's what you want. If so, you just need to change your outer wrapper from 800 to 1050 and then change your main from 410 to 840. These widths should also leave you enough room to set your left and right margins in accordance with the tutorial, and that should do it!
Nice blog and great photos!
Hi RW, thank you so much! It now works! I've been trying to figure this out for months, so thank you a million times for sharing what you know with me and others. I'm glad you like the photos as well.
This is the GREATEST thing that has ever happened to me!!
Now, how do I put in a 4th column??
the-mt.blogspot.com
You rock.
again, absolutely awesome. thanks so much!
Thank you so much!!! I have been trying to figure this out for the longest time! I actually started to clap when I saw the results!!!
Thank you for making this so easy. I've been wishing for a 3-column blog, and now you've helped me get it! Your tutorial is wonderful. Well written, easy to understand and very very helpful.
www.ceejaybags.blogspot.com
Mine is sooo close! What do we need to fix?!
:) Our sidebars are still on the bottom. Thanks a ton!
www.annemariephotography.blogspot.com
i see you've helped alot of people, but i'm struggling...
i don't have a 'left margin' in my code and i have a 3 column test blog...
hmmm..
thanks for this great blog...I followed your instructions and now have 3 columns...but...my widget images are getting cut off. What do I do?
Chromer, you're struggling because you're using the wrong tutorial. You're Whistler Flyfishing blog uses Minima Black. Use the Minima Black tutorial, it's easy.
Something Blue - I'm assuming you're referring to the weather widget - the rest look fine to me on quick review. I think that widget is too large for the column. Try aligning it left, if that doesn't work you'll probably need a wider column. Alternatively, if you can customize the widget, you can reduce the widget width. Don't be afraid to experiment - just back up your template before you do.
Annemariephotography: Those photos are way too big for the main column width. There are two ways to fix this, and you'll probably need to use both.
1. You need to expand the width of the main column to accommodate the width of the images (making sure to expand the outer wrapper and header wrapper by the same amount)
2. You'll probably need to reduce the size of the images. You can do this easily on photoshop. Just go into edit, and click resize. You can select the pixel width you need and it will automatically maintain the photo proportions.
Also, check out my response to Jessica above, she had a similar problem and wound up with a great looking blog with similar quality photos.
Cheers, RW
Thanx!
Wow, this is so great! I owe you one. Next drink is on me, my friend.
You rock my world!
Thanks!
Shelley
THANKS YOU!!!!! This has been the only tutorial i've understood, and I've been looking for days!!!
lifesaver!
I am using Minima Lefty and I need to have my extra column on the right and not the left. Sooo I went ahead and changed :left-side bar to right-side bar but it's still not right. I also had to remove that extra widget: not sure if I need it. I am going to expand my sidebars to 220 like you told Patranila in Oct. posts. Can you check out mine and see what I've done wrong?? Thank you!
This is twice now where you make sense and those other books that I've read got me all confused!!
Thank you much, Annabell
many thanks for your wonderful help but i am stuck. have lots of room for three columns but layout version will not let me save - something about widgets...i think another person posted that same issue but i still didn't understand how to remedy it...thank you!!
Annabel, I saw your comment on the other tutorial, it's an easy fix you just put the sidebar div after the main div, instead of before it as instructed in the tutorial. So it should go main div, then new sidebar div, then old sidebar div, and the main should float left. I will write a tutorial on it.
Kritter, the widget thing is tough because the widget should be "unique" and I have been trying to find a universal solution which I think I now have with the Blogger Button. I amended the tutorial with new code - try it now; you should have no problems.
THANK YOU!! I was getting frustrated with other 3 column tutorials I came across (for whatever reason, I kept getting errors), and then I found yours. Everything works perfectly! Thanks sooo much
i love you.
Hi RW,
This looks like it is a great tutorial! I do have a couple questions though.
I changed my test blog, (mycookiesandcream.blogspot.com) to three-column using a different, confusing tutorial, and now I cannot upload a picture into the header and have it show on the blog. I'm not completely concerned about that, but if you have an answer to that, that would be fantastic!
My more important question is, if I change my main blog, (jewelsbyjulia-lauren.blogspot.com) to three-column using your tutorial, will I be able to still have an image at the top for a header?
Have a wonderful day,
Miss Julia
Miss Julia, yes. Just follow the instructions. The header image you already uploaded will adjust. When you upload new header images, they will also fit.
Good luck!
Thank you! This was SO helpful!
Damn! You have made me look like a master! I'm not worthy! I'm not worthy!
OMG, you are the best EVER, thanks- worked a treat!!
Thank you for the awesome easy to follow tutorials. :)
Your tutorials are SO awesome and easy to find. I featured you on my blog. http://eyesofamber.blogspot.com/2009/03/phase-one-completeaccepting-affiliates.html
This is awesome and so easy!!! Thank you thank you thank you!!
hi please help my left sidebar didnt follow the margin its still close to my center column..thanks
Wow! That was the easiest, most clear tutorial I have had the pleasure of doing. It did exactly what I wanted it to do. I made a new blog just to try it out. Now, that I see how easy it is and how nice it looks, I'm going to switch my main blog over.
Thank you so much!
Thank you so much! You made it so easy for me. Keep up the good work!
I thank you so very much for your tutorial on how to do this- but I'm completely stumped in regards to actually adding info in that new left hand column!!
Blogger doesn't show that new column in the page elements edit page.
I think I know where to add it in inside the HTML, but can't figure out exactly how to do it. All my attempts are wrong.
Help?
Fantastic, thanks a lot! Very good explanation, works like a charm. :)
And since the proof of the pudding is in the eating:
http://34something.blogspot.com/
You are truly amazing! Thanks so much for all of your help. You saved my blog!
Mina
www.theuniverseguru.com
Thanks! Great help!
Sooo helpful!! Thank You!
Thanks so much! This was the easiest and most helpful tutorial I've found on the subject. I really appreciate the help!
YOU are my new favorite person! Thank you!
I followed your instructions on both adding a third column to blogger as well as spacing the columns. It looked GREAT in my test blog, but when i did it to my main blog, the center column is no longer centered, and it's smooshed into the left column. HELP! I'd like them to be evenly spaced with a nice space between the center column and the side columns! Thank you!!
Thanks a ton. This works great, but I still have issues seeing an embedded comments form on my post page.
Can you please take a look at it? Am I missing something?
RW, thanks. This worked great. Any advice on elongating the blue navbar at the top, so it fits the 940 pixel width? It is truncated & shows white space to the right when outer wrapper set to 940 pixels. Thanks.
-JM
You are a gift from God! Thank you so, so much!
thanks for sharing your expertise!
thankyou so much! it helps me a lot :)
Hooray, this worked!
As others have told you before, you are sent from heaven - thank you! Could I pester you with a specific question about my blog?
I just switched to the 3 column layout using your fabulous instructions. Worked great! However, I'd really like my main "Blog Posts" area to be on the left hand side of the page, and then have the two thinner housekeeping and advertising columns be side by side on the right... like this blog actually: http://www.mom-101.blogspot.com/
It seems impossible with someone with as little web design knowledge as myself to be able to do this. What do you think?
By the way, I'll definitely be doing a post singing your praises and add you to our BlogRoll.
Cheers!
Erin
Me again... After reading through previous advice you'd given to other commenters in the past, I was able to resolve the problem - thank you, thank you, thank you!!!
You just made my day... thanks so much for this really easy to follow tutorial..
After nearly a year of searching for a way to create a 3-column blog, I found this site. You made it so easy - unlike other sites - so thanks for sharing your expertise with us!
You're a life saver!!!!! Thanks a bunch! ( :
Please----I have a blog SOS!
I was thrilled by your tutorial which FINALLY enabled me to have 3 columns. (Thank you!!)
Now I am stuck. I have the ability to drag all of my items EXCEPT my blog posts.
I'd like my blog posts to be in the center, with a sidebar on each side. When I try to "edit" my layout, there is a dotted line around ALL of my sidebar contents, enabling me to drag them where I'd like. However, the "Blog Posts" box is not dotted...thus it is stuck on the left.
Please help!!! THANK YOU!!
THANKS!!!!!!!!!!!!!!!!!!!!!!!!
You are our my HERO!!!!! Thank you, thank you, hugs and kisses and Starbucks cards and twitterstars for you! 3 Coloumns was my dream, the unattainable pie in the sky... and you made it SOOO easy for the most untechy fashionista ever :)
Seriously, thank you. One issue, my right side bar cuts off the first letter of our categories widget only and the right side of our Blog Widget. Any suggestions? I tried making the right wider (210px) and it still didn't help.
Regardless LOVE YOU for helping our blog baby grow. OK, OK...now I'll stop embarrassing you AND myself ;)
I'm just so happy!
Used your super simple instructions today. Now, I have a wonderful three column blog.
Thanks for sharing!
Beautiful! Thank you so much, the instructions were perfect!
thank you, thank you, thank you!
I went on to tweak it a bit...but you sure gave me the courage to do so!
Mom in Jacksonville, I wish I knew the answer to your question. Is it a wire frame editor problem? You can add some code in to fix that, and you can find that information at the end of several other tutorials here.
As for other general comments regarding spacing, things being squished and so forth, you just need to fiddle with the margin settings until you get it to look the way you want - it's easy. If your main column is "squished" in toward the left column, increase the left margin on the main column, and/or the right margin on the left sidebar. You may also need to reduce the size of one or both of them.
Also, several people made comments about images/widgets getting cut off in their sidebars - again, you need to either reduce the size of the widget to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget.
Thanks for all the comments!
Cheers, RW
Thank you for the step by step instructions, my blog looks so much better now.
Thank you! This was super helpful. I'm really glad I didn't download a new template.
Hi RW! Your comments are ever so helpful to newbies like me! I have followed a lot of your instructions, I even made my blog a 3 column blog yay! But now i have this issue with my columns interfering with my background. I'd like to either a) move everything within the guidelines of the background's border or b) put each of the side columns outside the border. whichever is easier or would look better. could u please help? thanks so much!!!
I need help! I love how your site is the only one I was able to get to work! However, I am having one little problem.. The space between my left sidebar and the main posts is far smaller than the space between my right sidebar and main postings. I would like to make the main part smaller so I will have more and equal room between the main section and each sidebar. Can you help??? Thnx!
thank you this has been really helpful! :D
Thank you soooo much! It worked perfectly!
Kathlyn, it's easy - just adjust the margins between your sidebar columns and your main column so it looks how you want it to look. You can also reduce the size of your main column, increase the widths of your columns, whatever you want.
More pixels in your margins=more space between columns, less pixels in your margins=less space. The way I have laid it out will not work for everyone, but the instructions are meant to give you the skills to modify it on your own exactly to your liking. Fiddle to your heart's content! In the process you will learn how to do all this on your own.
Three Column Blogger is all about empowerment, baby!
Clarification: the way I have laid it out WILL work for everyone, it's just that everbody is different and some people prefer a different look. If so, just fiddle with the pixels until you get what you're looking for.
One other note: "everyone" is a lot of people. I try to get to everyone's comments either by modifying the posts or commenting directly. If I miss one or two I hope you'll forgive me!
I love the way this looks and am trying it for the first time. Your instructions are clear, but I can't seem to get things lined up well with my background. Could I beg your for a little of your time to check it out and see what I need to do? I'd like to line up the sidebars in the green boarder area and have played with the numbers a lot and can't seem to get it to change at all, so I must be changing the wrong thing. Also, you may know the answer to this as well...how do I move the "comments" to below the post instead of above it? People keep commenting on the wrong post because they are used to comments being at the bottom! Thanks a million for any help you can provide and I WILL offer a small donation for yout assistance. you can email me in private if you'd like at CyndiLJ@aol.com Blog is www.lajoyfamily.blogspot.com . I must tell you that yours re the first instructions to EVER make sense! Thanks for keeping it in real language for the rest of us!
Cindy, nice job with those new columns you have there! I'm all about transparency - no need for private emails.
That said, the reason you can't get things lined up with your background is because your blog uses a heavily modified tempate (if not some sort of customized template that someone built for you) and that template contains a background image that will never work with three columns.
But have no fear, help is here.
It looks like the easiest way to fix your problem is to replace this code (use ctrl F to find it):
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22http%3A//i342.photobucket.com/albums/o401/Thecutestblogontheblock/aSundried.jpg %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 http%3A//www.thecutestblogontheblock.com%22%20target%3D%22_blank%22%3E%0A%3Cimg%20src %3D%22http%3A//www.thecutestblogontheblock.com/images/tag.png%22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>
With this code:
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3E%0Abody%20%7B background-image %3A%20url%28%22http%3A//i342.photobucket.com/albums/o401/Thecutestblogontheblock/greendots.jpg %22%29%3B%20background-position%3A%20center%3B%20background-repeat%3A%20no-repeat%3B%20 background-attachment %3A%20fixed%3B%20%7D%0A%3C/style%3E%0A%3Cdiv%20id%3D%22tag%22%20 style%3D%22position%3Aabsolute %3B%20left%3A0px%3B%20top%3A30px%3B%20z-index%3A50%3B%20 width%3A150px%3B%20height%3A45px%3B%22%3E%0A%3Ca%20href%3D%22 http%3A//www.thecutestblogontheblock.com%22%20target%3D%22_blank%22%3E%0A%3Cimg%20src %3D%22http%3A//www.thecutestblogontheblock.com/images/tag.png%22%20border%3D%220%22/ %3E%0A%3C/a%3E%3C/div%3E%20"));</script>
This will change your background image, but that's good because the existing image is what's causing those columns to run through your columns. Egads!
NOTE: When I previewed these comments, the top line in the replacement code did not word wrap and may be cut off. The same was true for the third to last line in the code. In their entirety, the code lines should be:
<script>document.write(unescape
("%3Cstyle%20type
and
%3D%22http%3A//
www.thecutestblogontheblock.com
When you paste them back into the appropriate spots, there should be no spaces; it should all run together like birds of a feather.
Good luck to your family and enjoy your blogging.
Cheers, RW
Thanks so much for this! I guess I feel the same as everyone else aboout how easy you have made this.
Just one question....if I want to change the added column to be on the right, so my main post column is on the left instead of the middle. how do I go about doing this?
I've tried changing anywhere it says "left" to say "right" but this doesn't seem to work.
Thanks!
Thanks so very much! I've been wanting to do this for ages but was scared! It was easy to follow steps and I did it! Yay!x
This tutorial was exactly what I needed. Thank you!
thank you very much. i have tried to do this many times and today was determined to make it work. and once i found your easy instructions... it was a piece of cake. i honestly didn't think it would work, it was so easy. but i hit preview and everything was there! and the link to adjusting the margins was awesome as well. thanks so much!
thank youuuuuuuuuuu!!!!!!!!!!!! i was on the verge of giving up then i found your blog.... awesome!! thanks so much!
Thanks so much! Both tutorials were very helpful... :) Much gratitude for helping us non-tech geeks.
THANK! I was determined to make it work. I have tried to make 3 column work with other instruction... Until I found this blog I was not having any success... When I wanted to fix the margins I was excited to know that I wouldn't be hard at all because I had already had success with your column tutorial...
THANK YOU for sharing with us all.
Brooke
this is fantastic...3 columns and adjusted margins...you rock!!
I'm thrilled to have found this tutorial! I've searched for a month and had almost given up. You made it so easy. Thank you!
Question: When I edited the colors for the link boxes in my sidebars, only the right sidebar changed. Is there any way to make the left follow along?
http://ccofgreensboro.blogspot.com
Thanx you so much,your instruction made my blog look beautiful,god bless u
Well I think I made a bit of a pigs ear out of this...got the 3 columns but wanted to change width and where you said look for leftside strech then main then sidebar or something similar I have got Rightside oooooh its just gone soooooooo wrong and I'm utterly lost :(
have just thought bet you'll get linked to my old blog and not Lajonis place ARRRRGGGHHHHH !! I GIVE UP
Excellent post, VERY useful - was the only part I was really struggling with. Check out my blog:
http://thoughtsetmusings.blogspot.com
thank you! I have one problem and I cannot figure out what is wrong. when you view my blog at the bottom there is a slide tooll bar and the width of the blog doesnt fit within the screen. you have to slide to right and then it is just all white space.
please help.?? Thank You :)!!
www.mizzjenna.blogspot.com
Thanks so much for your help. The directions were perfect! You've been a huge help.
Really appreciate you setting up these tutorials free of charge. Simple and easy to follow. I linked to your site from my blog in appreciation!
THANK YOU soooo much for taking the time to create & post this. I've always wanted to have 3 columns on my blog. Your instructions were so easy & clear. You Rock!!
www.kariberry97.blogspot.com
i cant for the life of me have my 3 columns separated! the left sidebar and the center body column are like Siamesed! then i have the right sidebar who's perfectly separated from the center body column! how can i make my left sidebar do what the right one is doing? ive been trying to fix this all day long! HEEEEELP!!!!!
btw... i love your site and i successfully added a third column to my blog in one sitting! :-)
do you have a button i can add to my blog that will direct ppl to your site?
thanks so much ...
it works for me
thanksssssss
Great works! :) I love these posts of yours. Thank you very much. Love your works and your help :D
Hi there,
Okay, you rock as far as three columns go and your instructions are great and easy to follow.
The only problem that seems to remain, embedded comments. Have you managed to figure out how to fix the problem of embedded comments? It doesn't matter how many different blogs I do this to, but I end up with the problem of being unable to use an embedded comment form and have to use a pop-up. However, I would prefer to use the embedded one.
Here's an example of how the embedded comment form isn't working.
http://mlmbois.blogspot.com/
Thanks!
Once again, everything worked perfectly!
Many thanks for this. I implemented the 3 columns and then adjusted widths - everything looks great!
This was really useful and easy to implement - thank you! There's one thing I'm trying to do that I can't find any help with and I wonder if you know? I'd like the centre all the contents of my sidebars....is there an easy way to do this?
Hey this was amazing and I really really appreciate it--but is there anyway you can tell me how to get a fun background back on and to make it more even?? Thank you so muuch!!!
Hi, I'd like to thank you for this tutorial! Although, I am still having a problem with my right side "add gadget" button being at the bottom instead of the side. Also, my bottom gadgets are showing up on the side instead of the bottom. I've checked my numbers...they seemed ok to me. Is there anyway that you can check things out and give me your thoughts?
I did an evil laugh when I finished. I love it thank you!!
Thanks so much for this blog! The Columns worked great,still going to adjust the margins though. I do have one strange problem that happend. All the links on my blog now disapear when you go to click on them. They still work, but before it would just underline the words to the link. Can you help me fix it? Sure appreciate it.
Thanks for the tutorial! However, I can't for the life of me figure out how to get this to work. In my HTML code, I don't have a 'left sidebar' listed. When I add a left sidebar (and all of the left sidebar html code) nothing changes in my layout. What am I doing wrong?
Thank you so much!!
This is so great! I have used this blog so any times. But I have a case for You:
I have tried (and almost managed) to increase the with to OuterWrapper to 1050px, leftsidebarwrapper 170px, mainwrapper 630px, sidebarwrapper to 170px.
The blog looks good in the view picture (everything seems good), BUT when I go to the "layout" menu the page is now moved a bit to the right - I have now a horisontal scrollbar on the bottom of the page, and it is a bit more job to work in the layout meny due to the scrolling.
Is this correct?
any Idea?
I have used this on my testblog http://husetpaoya.blogspot.com
Best Regards :o)
Never mind, I fixed it. Thanks for this blog again, it helped alot.
My right column keeps falling to the bottom of the page!! I think i've gone through every step at least 5 times... :( help?
www.simplysavingspouse.blogspot.com
Your site is AWESOME!! So easy understand for those of us with no programming experience. Changed over to a 3 column layout.
Thanks so much!!!!!
www.thecottagehome.blogspot.com
What can I say? SO very helpful. Clear and easy to follow. Thank you very much. No trouble at all following your instructions (and that's a miracle for me). A great site and service. Thank you
I've been wanting to change my blog to 3 column for so long and just could find out how to do it. Now thanks to you and you wonderful blog I did today and it looks fab. I might even give widening the whole blog page ago. Thinking about that first before I jump in with both feet......
Thanks again, will pass on your link to my blog friends.
You're an absolute God send!! A genius!! Thank you sooooooo much for these great and easy to follow tutorials. I only have one question!
I followed the tute, then messed about with the column widths (but still maintaining the total widths with the outer-wrapper width).
When I do this, my blogger "edit layout" page shows the right-hand column hanging down a little as though it doesn't fit properly. It looks great in the browser though.
If I drop the width of the main column by 20px the spacing between the left column and main column is uneven compared to that between the right and main column, but it looks ok in the blogger "edit layout" page. What would be causing this do you think?
Dude, you're awesome! I've been looking for THREE days for an easy way to add a 3rd column without having a whole new template.
THANKS A MILLION!
HI, I followed all your directions and it worked perfectly. I also resized the width of the columns. I am now having a problem, and i'm not sure if it is realted to the third column chages or having tried to use the new editor mode, but whenever I post a photo now (in old or new mode) it shows up as code, not as a photo. In the new editor mode there is also no place to chose to upload new photos. not sure what to do, any ideas where ot look for answers, I'm new to blogging. thanks!
Thanks, this was so much help! For the math, you might want to note that the extra pixels added up to 60 instead of 70. I figured it out anyway and without this blog I would not have known where to start even though I know some HTML. Thank you again!
I am in a desperate need of help!
I used your tutirial and made my 2 column blog into 3. everything worked fine except that now I cannot add any widget to either the left or right column.
WHY? I want to cry....
could you please give it a look?
I really appreciate that!
Olivia
> http://longuette.blogspot.com
Hi, it's me again.
I closed and opened again my page and everything worked.
So ignore my message
But, I noticed that by removing the navbar, the followers disapears! Anyway, I will keep the navbar...
Thank you, thank you so much for you help and support. I have tried following other site for instructions and they did not work. I think you have done an amazing work with this helpful blog. I do not have anyone that can help. So thank you again!!!!
LoL
Olivia
http://longuette.blogspot.com
(leave a comment if you like!)
Hey, RW, You're an answer to prayer. I've gotten exactly the look I want and feel so EMPOWERED!
Come see the results at Mother Robin's Notes from the Nest
Mother Robin
Thank-you!! I followed your directions for the three column and now the adjustments. Worked great!! I did lose my gadgets at the bottome---any thoughts? I scanned the other comments and didn't see that problem.
Seriously, THANK YOU! This is fabulous and so easy!
Thank you so much for the great instructions. I finally was able to add three columns. I just have one issue with my header. One of the border line around the title is partially missing. Do you have instructions to fix that?
Nothing new to add to the millions of thanks.... That's awesome!
Another good thing to download for sizing images - widgets etc. to go into your sidebars is called measure it for pc users and pixel sticks for Mac users. It has helped me out a lot. If anyone has any ?'s about this email me at luvmycat05@charter.net.... put measure it in the subject line so that I know that your asking me about it.
Post a Comment
<< Home