Align Blog to Left. ~ The Blog Doctor.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

You can push your whole blog body to the left in two steps.........

First backup your template. Go to edit Html subtab of Template tab and click on Download Full Template link. Save the XML file to your PC with an appropriate name.

Next scroll down in Edit Template text box till you come to :

Content
----------------------------------------------- */
#outer-wrapper {
padding-left: 200px;
padding-right: 190px;
text-align: left;
xxxxxxxxxxxxxxxxxxxx
border-top: 0;
overflow: hidden;
}

This is also named as outer-wrapper on some templates. This contains the whole blog and if you add following lines of code to it the whole blog will shift to left leaving you plenty of space in the body at the right to add an extra column or two.
These lines are added at xxxxxxx position above :

float:left;
margin-left:20px;

If there is already a line for margin property delete it and add above line. This will prevent blog from getting too close to the screen edge.

To utilize the extra space in the right you can add a column like this :

#rightcolumn {
float:right;
margin-right:20px;
}

and place it just under the <body> tag in the template like this :

<body>
<div id="rightcolumn"> </div>

Preview and Save Template.
Advantages of this is to use more of the screen and also better visibility at low screen resolutions.

Technorati Tags:css, template

3 comments:

Mike said...: Thanks again for the information, but I have a question; now that I have shifted everything to the left and, ostensibly have a third column, how do I use it?
Thanks,; September 27, 2007 12:54 AM
Anonymous said...: The second part is not working for me i cant get the stuff to go over to the right helllp; October 14, 2007 5:30 PM
vin said...: Anonymous,

What is your blog url? Did you clear cache after saving changes :

http://betabloggerfordummies.blogspot.com/2006/10/how-to-refresh-your-blog-page-in.html; October 14, 2007 7:03 PM