How to Widen Your Post Area

Bella Skye requested a tutorial on widening post areas - so here's a quick how-to. =) This is an excellent question, and very easy to do.


You first need to decide how much wider you want your posting area to be. I generally keep it at about 700 to 800 pixels wide...so remember how wide you're going to have yours.

Go into "Edit HTML" and find this line-

#outer-wrapper {
width: 1000px;

(You can find it by hitting ctrl + f)
This is the width of your blog. Your width might be different from mine, but everything will be the same except for the number. Write down the number you see there.

Now scroll down just a little bit to

#main-wrapper {
width: 720px;

This is the section that decides how wide your posting area will be. Again, our numbers might be different. Write down the number you see in your template. Now it's time to do some math! ;)

Subtract the width of your main wrapper from the width that you want it to be.
(i.e. if I wanted a new area of 800px, I would do 800px-720px=80px)

The number you get (80px in my case) is how many pixels you need to add to your outer wrapper.

So go back and add the number you just got (80px for me) to the width of your outer wrapper. My code now looks like this -



#outer-wrapper {
width: 1080px;

The last step is the easiest. Go back to your main wrapper and type in the width you want your area to be. (So I would type in 800px in place of 720px)

That's it! Now, to summarize - what you're doing is increasing the total width of your blog so that you can widen your post area. With just a little math you can make it just perfect!

If you have any questions or were totally confused by this tutorial, please don't hesitate to comment! =) I would love to help you out!

2 comments:

Bella Skye said...

Thank you :)

Hannah said...

You're very welcome!! =D