Saturday, May 12, 2007

Change The Width Of Your Blog Display

It's not hard to widen the display of your blog. There are 5 containers in a standard 2 column template, each with a separate width to change.
  1. Outer (contains, in turn, post and sidebar).
  2. Header.
  3. Post area ("Main").
  4. Sidebar.
  5. Footer.
There will be challenges here, so prepared.

With a "standard 3 column" template (left sidebar - main column - right sidebar), #3 Main will be divided into Left Main and Right Main, with one being a second sidebar, and the other being the posts column. A variation on the "standard 3 column" template puts the left and right sidebars next to each other, as you can see in my home blog, Nitecruzr Dot Net. In the latter case, the Post ("Main") column will float opposite the sidebar column, and the sidebar column will contain the left and right sidebars, each floating opposite each other.

You'll generally make Outer, Header, and Footer equal width, but you don't have to. It's OK to have the header wider or narrower than the post / sidebar areas. Do this discretely though, so you don't waste valuable screen space.

The Main and Sidebar containers are the trickiest - they sit beside each other, and both have padding and margin widths to consider. If you make the Outer container 800px wide, you can't make the posts ("Main") 550px, and the sidebar 250px. There is padding inside the Outer container, and there are margins outside both the Main and Sidebar containers, that you must allow for. Ignore margins and padding, and you will have a dropped sidebar or main area.

Not all blogs, using standard Blogger templates, can be easily resized - some blog decorations will provide a challenge. The Rounders, Scribe, Son Of Moto, Thisaway, and TicTac templates each use fixed width page elements, as container borders. You can supposedly get custom versions of these templates, that are resizable, or that come in additional preset widths, but as custom templates produced outside of Blogger, they have various disadvantages.

A blog that uses the Minima template, however, is easy to resize. This is from one of my blogs, which uses Minima. Note the naming conventions, which are standard for many resizable Blogger provided templates.

As always, I'll advise you to backup your template, before and after making these changes!


#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px; <== #2
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

/* Outer-Wrapper
------------------------------------------- */
#outer-wrapper {
width: 670px; <== #1
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 420px; <== #3
float: left;
word-wrap: break-word; /* fix for long text
breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 220px; <== #4
float: right;
word-wrap: break-word; /* fix for long text
breaking sidebar float in IE */

}

...

/* Footer
------------------------------------------- */
#footer {
width:670px; <== #5
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

}


Now, all of the discussion above describes a standard, old-fashioned fixed width template. I just migrated this blog to Layouts, and the Stretch Minima template. With Stretch Minima (and other dynamic / fluid templates), the blog fills the available horizontal space, automatically.

Check it out! Grab the sides of the browser window, and pull it in and out. Watch what happens as the browser gets narrower or wider.


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
margin:0;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
margin-left: 1%; <==
width: 67%; <==
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 */
}

html > body #main-wrapper {
margin-left: 2%; <==
}

#sidebar-wrapper {
margin-right: 1%; <==
width: 25%; <==
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 */
}

html > body #sidebar-wrapper {
margin-right: 2%; <==
}



No more wasted space - the blog automatically fills whatever space the browser is given. All modern browsers should support this.

>> Top

37 comments:

icybread said...

Thanx!!!!!!!!!!!!!!

Jeff Ircink said...

hi - i did everything you outlined as instructed (well maybe not everything or i wouldn't be commenting). the only thing that didn't work is this: the first 2 posts on my right side bar were fine...the rest of the sidebar disappeared and ended up at the very bottom of the blog - flush left. what did i do wrong?

Jeff

Chuck said...

Jeff,

You have a margins / padding problem, or the data in the post or the blog is too wide.

Do you see my third paragraph?
There is padding inside the Outer container, and there are margins outside both the Main and Sidebar containers, that you must allow for. Ignore margins and padding, and you will have a dropped sidebar or main area.


Some templates have multiple container areas in the sidebar. If yours does (what template do you use?), be sure to adjust all containers appropriately.

John said...

Thanks a lot.

All Things Bright and Beautiful... said...

Dear chuck:-)

It worked!! YAY! but I lost the edit post icons (I didnt end up saving the final draft to show you tho unfortunately)

Hey thanks for helping us novices - I really appreciate it :-)

I'm off to look at other tips on your site too :-)

Bas, Katie and Luna de Laat said...

Nevermind! I just converted it to the stretch template again - and it's fine now. Thanks!

Annie said...

This is great! I've been reading and looking at my blog but I'm unsure. I'd like to move the sidebar over to the right more and make the post larger. I'm still not sure which to change to accomplish this. I am using a template from pyzam. Any suggestions?

Chuck said...

Annie,

I don't know a lot about Pyzam templates, but the instructions that I provide will work with any template as long as you look for the containers by function and not by name. But you will have to translate the names.

Annie said...

OK I took the plunge.... and it worked! Thanks for helping! I was concerned that by expanding the outer wrapper I would loose the pic underneath but it worked just fine and I believe that Pyzam calls them the same as the blogger templates.

Chuck said...

Way to go, Annie!

If Pyzam truly makes Blogger templates, their code would have to be compliant, and modifiable the same way. Thanks for letting us know, others may follow you!

Sydney said...

hi, i'm pretty much retarded when it comes to things like this and i'm having the hardest time getting it to work. i love the layout i have, i just rather it actually spread to the edges of the browser. help please!

Chuck said...

Sydney,

That's what a stretch template does for you. Check out the above second half.

schizosmurf said...

It took me less than 5 minute to find this page, less than 5 minutes to make the changes, and less than 5 minutes to thank you. eaaasy. :) Thanks for the help.

ashvinbhatt said...

Thanx for such a nice info.......

psychozoe said...

OMG You saved me! I was going crazy! LOL Thank you!!!!

sbunting108 said...

thank you very much. It worked look www.photofingers.blogspot.com

Chuck said...

Dammit, more pictures of England. Thanks for sharing, that water fountain picture in particular.

Cherry Blossom said...

Chuck,

I've followed your guidance and mine is still a fairly narrow main body. I've changed the 2 column to a 3 column (I think?), but the main posting part is still too narrow and the outer margins too thick. Any tips? I'm using Blogger's Dark Dots template.

Mahalo,
Cherry B

Chuck said...

Cherry,

This post provides the how to, to get you started. If the post column is too narrow, and the sidebars are too wide, then you have to adjust the column widths. Adjust them carefully, remembering to adjust the parent columns (which contain the child columns), as well as the child columns (which contain the blog content).

Remember, there's not a lot of horizontal space available, so adjust carefully.

gloveofpower said...

Super helpful, Thanks much!

patty said...

thanks for the instructions.... i'm a nit-wit when it comes to this. made some changes i like (following the stretch instructions), but my photos are still narrow, even though i can see that the whole column/browser? got wider?? any suggestions?
thnx!

Chuck said...

Patty,

The pictures, uploaded through Blogger, are given a height and width when uploaded. You can widen the containers in the blog, and that should not affect picture size.

You may be able to resize the pictures manually, but that won't happen automatically when you resize the columns / containers.

ninofotografo@gmail.com said...

Hi, maybe you can help me... I've tried everything you said, but when I post a photo it is automatically shrinked. I can't get the photo to fill the 660 px width, even though the file is 660 px wide. If I strecht it manually on the post window, it looks bad, like it's low resolution. I'm using the Minima layout, and I've tried the Minima Strech, but it is the same.
ninofotografo.blogspot.com

Carnation said...

hi thanks for the advice to reduce the width, i did that and now my site is ok. it's at http://carnation-easyrecipes.blogspot.com/

Pranav said...

Thank You Chuck for posting such helpful tips.
It helped me in correcting the width issues with my posts. :)

Ruby said...

Thank you so much! At first it wasn't working but after going over and over the code I found one area where mine was different than yours.It was in the outer wrapper, mine had a width line in it and yours didn't. I removed mine and bam, it worked. Thank you so much!!

Jewelove said...

My blog is www.Jewelove.blogspot.com
I have a similar problem as Jeff, all of my sidebar widgets have been pushed below the posts!
Please help

Chuck said...

Jewel,

If you have a dropped sidebar, do some diagnostic work.

Cyndee Greene said...

Hi Chuck~
Thank you so much for all of this information. I have learned SO much.
Between your 3 column, stretch 3 column & this post I just about have it. It is amazing!
The one issue that remains is that my blog posts are narrow. I have tried changing the width, but it just moves it around w/ no change in the width.
I am using a Minima Stretch.
Is there something else I can do?
Thanks~
Cyndee
www.touchofgreene.blogspot.com

Chuck said...

Thanks, Cyndee,

When you change the width of a container, you may have to change any parent and child containers to get a consistent improvement. Fluid templates are different from static templates, but they still need careful alterations.

Right now, you have a "Minima Stretch" by name, but all of the containers are fixed width. Did you ever have proportional width containers?

Would not this be a good subject to be discussed in Blogger Help Forum: How Do I?, or in Nitecruzr Dot Net - Blogging?

Polly Pocket said...

Hello. I want to change the width of my blog also but I am completely lost when it comes to the html stuff. I read everything you said above but I'm still not sure. Would you be able to go step by step so I can fix my blog? I would really appreciate it!

Chuck said...

Polly,

If you need step by step instruction, you can ask a question at Blogger Help Forum: How Do I?, and get peer advice.

mattie.swann@gmail.com said...

hi there I think my problem relates to this ... My white minima blog is fine when viewing it on my little Macbook 13" - which I designed it on ... however when I view it on my mom's 15" pc laptop It blows the blog up to fill the screen! how rude! I don't want that! my header which is an imported image becomes all horrible and soft losing all its nice crisp edges!! And I become angry.

Is there a way to ensure that when viewed on any screen, the blog always stays the same size in the center of the screen but the white space either side is the only thing that stretches to fill the screen?

Thanks in advance for any help!

Paz. said...

Yay!!
It worked thanks..!!
www.lifeatgitamhyd.blogspot.com

mia.lia's profile said...

haha..that simple?
how can i be so !#@!$
hehe..tnk u so so so much =)

Carmela Martino said...

We're using a "Minima" template. When I added pages, I widened the outer, main, and sidebar wrappers as you described here so that all my page titles would show up on one line. It looks fine on our home page, but I still get a two-row title list at the top of all the other pages. Any suggestions?
See http://www.teachingauthors.com/
vs:
http://www.teachingauthors.com/p/for-teachers.html

Solid Planet said...

It worked.thanks