About   All Tips   Tips by Category   Tips by Ability   Help!

Middle Column Border- Intermediate

Not too long ago, someone asked me how to put a border around the middle column in a three column template. I figured if one person needed help in this area, that perhaps others of you would like to know, too. Here is how I did mine:

From your dashboard, go to 'Layout'. Click on 'Edit HTML'.

*Save a copy of your template. *

Scroll down to the part that says something like this:
#main-wrapper {
width: 410px;
float: left;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Your width (410px) may be different. You may also have other code written in this section. That’s okay. Don’t change any of it unless you want to. The only thing you need to add is the part in red.

Add border:5px solid #000000; under #main wrapper {

It should now look somewhat like this:

#main-wrapper {
border:5px solid #000000;
width: 410px;
float: left;word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}

Of course, you can make the border any color you wish. I showed you how to do a black border (#000000) but you could choose any color (EX: if you wanted to make it white, you would substitute the #000000 with #ffffff.) You can also change the width of the border by making the number before px higher or lower.

You can find color codes by clicking here, or you can download a free program called ColorPic, which is what I use.

Preview the template before saving it. I tend to preview several times before saving.

Hope this helps! Remember, if you need further assistance or would like to know something else, ask me a question in my comments section. I would be more than happy to help you. Oh, and let me know if I can use your name/URL when I answer your question in my post. I don't want to bring attention to anyone who doesn't want it.

Happy blogging!

For more help with borders, visit Blogger Buster.


amanda said...

hey jill. what a great idea! you may want to share the page with the html codes for the colors. i found a great one here:http://tips-for-new-bloggers.blogspot.com/2007/02/hexadecimal-html-color-codes-and-names.html
:0) amanda

He And Me + 3 said...

Ok, this is so cool...unfortunetly the last time i tried to change the background of my blog it almost wiped it out completley. I was in tears. I am too scared to try anything else. I know I know..get over it. Thanks for the hints I think it is a great idea to post them...people want to know for sure.
Love the new blog look and I think the 3 columns is the way to go.

AMY said...

I am so impressed JILL!!!! I love your new layout..super special!!

Whitney said...

Um your blog is so cute!
Love it! I am at a loss of how to do everything. It took me forever to figure out how to do a header!!!

amanda said...

so i'm getting irritated at my little code. first thanks for the color pic thing! i'm using that. NOW what i want to know is what are your codes for the sidebars. my center column is too close to my left side bar and everytime i try and play with the html code i can't get it centered between the two sidebars. yours is and looks super nice and not irritating! lol. thanks!! amanda (you can just email it to me if you'd like amoschel (at) msn (dot) com

amanda said...

okay now i'm taking over the comments! but anyways i figured it out! yay. thanks though. amanda

Kelsey said...

Thanks for the tip!
I want to try and make new background and header, but I'm scared I'll mess it up.
I do want to try the border thing though, it makes everything look so put together.

Elaine said...

This is so great. Thank you so much. I think I might have time next week to change things up a bit...

3 Bay B Chicks said...

Jill, your hints and tips are WONDERFUL. Just what we need. The last few times I tried to re-design our blog it would look good in some browsers, but not others.

Looking forward to reading more tips like this one!