Wednesday, May 09, 2007

How to find the width of your blog Header, sidebar and main column

Got a question from a blog reader about how to go about finding the width of the blog Header, so I thought I might as well make a post to let more people know about it.

To get the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the relevant blog, click LAYOUT tab (Update: LAYOUT is now DESIGN), then click EDIT TEMPLATE. This will open the template editor window. Search through the templates for the following:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

These codes are from the template of this blog. The first block of codes tells me that the width of the Header is 750 pixels. The second block says the main column width is 400 pixels. The last two block of codes tells me that both the sidebars are of width 150 pixels.

44 comments:

  1. How can I make tmy blog wider? The width it is now crowds some of the sidebar content. If there is a 3 col version of this template in new blogger, all the better! Thank you Fake Janice Combs

    ReplyDelete
  2. For instructions on adjusting the widths of sections of the blog, refer to How to change the width fo the main column and the sidebar.

    Regarding 3 column templates, there is now plenty for you to choose from:
    New Blogger 3 column templates modified by Charlemagne Stavanger

    Dots New Blogger 3 column template with Header

    Mew Blogger 3 column templates modified by Ramani of Hackosphere

    New Blogger 3 column templates by Isnaini

    New Blogger 3 column templates by Thur

    Ramani's 3 column fixed width Neo New Blogger template.

    BTW, if you are worried about the wide space you see in this blog when viewing with a wide screen (1024x768 and above), there is a reason for it. It is to take into consideration visitors who uses small screen (800x600). If you want to observe how such visitors see the blog, try typing or copy-pasting

    javascript:top.resizeTo(800,600)

    into the address bar and press the ENTER key (FireFox and IE6). The window will resize to 800x600

    Also, read this post: What is the best template for my blog. However, that is my opinion. You may have a different opinion and may want to do otherwise.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  3. Hi Peter. Help me...please. I have not been able to get into my blog to edit a post. It's so frustrating. I keep getting the Apache error message with http status 500 message. do you know what I am referring to? Please help me. My email is : qoryiman@yahoo.com.sg.......My blog is www.solelyseoul.blogspot.com

    Thanks.

    ReplyDelete
  4. Hi Aini,

    See if using a different browser will help. I has helped me (and others) in solving a lot of different problems, cannot login, cannot upload photo, cannot open a page, cannot see Add a Page Element in the Layout, etc. Refer to
    What to do when your cannot publish post, cannot login, cannot upload photos, etc.

    Why you should be using more than one browser.

    If you are one of the 80% of surfers still only using Internet Explorer, it is time you get FireFox. You can download and install FireFox with the Google toolbar by clicking the "Browse the Web better with FireFox with Google toolbar" text link at the top of the right sidebar of my blogs.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  5. Hi Peter, thanks so much. I have tried using firefox, and now I am getting this error message: Status code: 1-500-19 .

    Is there anything that can be done?

    Argh!!!!

    ReplyDelete
  6. Hi Aini,

    Try other browsers, There are plenty. I have IE, FireFox (my favourite), Opera and Flock. Recently, I have been having good experience with Flock and Blogger.

    If this still doesn't solve your problem, post your problem in the Google Blogger Help and hope to catch the attention of Blogger Employee. Otherwise, try to catch Blogger Support attention (just as hard). How to contact Blogger Support, but you will have to try your best.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  7. Hii Peter,
    I wonder, if you could help me in getting my blog's width fixed on http://visitformoney.blogspot.com
    I wished to reduce the gap between main bar and side bar, hope u got what i mean to say. As always before, i m waiting for your reply. THank you

    Best Regards,
    Eliena Andrews

    ReplyDelete
  8. Hi Peter, It is so awesome that you offer soooo much help to those of us learning to use blogger. I have tried adding a graphic to my header, but it doesn't fit, as you will see. Is there any way I can stretch it to fit by changing the size of the picture I've chosen? Also, most times when I try to find the code that you suggest in my template, I can't find the exact code you mention. Thanks for your help sooooo much!!

    ReplyDelete
  9. Hi Jewel,

    There are various ways of adding graphic to Header. Some like to incorporate the blog title into the graphic and delete the text title. For SEO purposes, I think that is a bad idea and I would avoid it if I can. Here are various alternatives:
    Adding graphic, ads, search box etc. to blog Header

    Adding graphic background to blog Header

    Adding image or logo at the side of blog Header

    Another way to add graphic to blog Header (this I think need editing which I will do when I get the time. It may fit what you want to do)

    Special fonts for your clickable image Header without removing text title.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  10. Hi Jewel,

    Forgot to add, if you need to resize your graphic, Irfanview is a very good free photo editor which I use extensively. If you use <img> tag to add your graphic, you can resize by adding the attribute width="W" where W is the width in pixels. The height will adjust automatically to keep the aspect ratio constant, meaning the image will remain undistorted.

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  11. Hi Peter,
    I have 1 question for you, if you were so kind to help me.
    My question is related on how to find the width of my blog Header, sidebar and main column, as in my template the codes appear with percentages like this:

    #header-wrapper {
    margin:0 2% 5px;
    border:5px solid $bordercolor;

    #main-wrapper {
    margin-right: 2%;
    width: 67%;
    float: right;
    display: inline; /* fix for doubling margin in IE */
    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 {
    margin-left: 2%;
    width: 25%;
    float: left;
    display: inline; /* fix for doubling margin in IE */
    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

    ¿Do you know the percentages are relative to what? ¿How can I calculate the measurement in pixels?

    My Blogger Template Style is: Minima Lefty Stretch

    Thanx

    ReplyDelete
  12. Hi Mia,

    The template you are using is a fluid width template and it is not possible to find the width as it will be dependent on the screen resolution (large screen or small screen). There are advantages and disadvantages of fixed width and fluid width templates. The advantage of fluid width templates is that the site adjust to the screen of the visitor, and they will be able to see your whole blog/site without having to scroll horizontally. The disadvantage is you never know how your blog/site will appear unless you take the trouble of viewing it in different resolutions. I don't know what resolution you are using but I suspect it will be a large screen. If so, type or copy-paste this into the address bar in your blog/site to see it as a person with a small screen will see it:

    javascript:top.resizeTo(800,600)

    Which type of templates depend on the individual. Me, I prefer fixed width template because I know exactly the width of things I can put into the post/sidebar without worrying about problems when viewers with different resolution visit my site.

    For more information, see What is the best template for your blog. Please note that this is a subjective opinion plus things may change as more and more surfers change to large screen. But I feel the small screen will always be with us because of laptops, although what percentage one can never tell.

    ReplyDelete
  13. hey peter! i am easily able to adjust the width of the header but iwant to change the hieght as well!! what to do now? thanks in advance!

    ReplyDelete
  14. Hi Anuj,

    I think height is fluid, at least for template of this blog. Depends on length of description and what you put there. Eg. Putting search box in Header made the hight higher.

    Peter Blog*Star
    Tips and Tricks for Blogger or "Son of Blogger Tips and Tricks" slotted for conversion to custom domain

    ReplyDelete
  15. Hi Peter,
    Please help me. I am very new to blogger. I need your precious help in setting up my blog. I am using minima

    1. Please tell me how to resize "HEIGHT" and width of the header-wrapper to fit my header image. Right now I'm able to change only width.

    2.When the width is increased it is not getting centred in the page... How to fix it?

    3. and lastly.... what should be done if I want to insert an animated gif as header instead of an image...

    You have been so resourceful. Kindly help.

    ReplyDelete
  16. Hi Iqbal,

    1. Please tell me how to resize "HEIGHT" and width of the header-wrapper to fit my header image. Right now I'm able to change only width.

    I use the New Blogger Minima template modified to 3 column by Ramani of Hackosphere. As far as I now, you can control the blog Header width via CSS of the template. I have used lots of template before, and I believe practically for all of them, the height adjust to what you put in the Header. Eg. Write a long description or like me, put a multiple-site search box and the height become higher. Isn't that the case for your blog? Feedback welcomed.

    2.When the width is increased it is not getting centred in the page... How to fix it?

    My experience with the above template (the original template has blog Header width less than total width of content) is that when you change the width, it is automatically centered, but I supposed it depend on he template CSS. Again, feedback welcomed

    3. and lastly.... what should be done if I want to insert an animated gif as header instead of an image..

    Add animated .gif images to Blogger blog

    Peter Blog*Star
    Digital Candlelight Vigil

    ReplyDelete
  17. Hey Peter,

    I understand that usually the header HEIGHT would increase or decrease depending on the header picture... but on my case, it doesn't. It's a fixed height.

    How to I fix this??

    Btw, I'm used a Minima layout and then tweaked it to 3 columns myself. Could it be that I messed with the codes along the lines?

    Thanks in advance!
    Joy

    ReplyDelete
  18. Hi Joy,

    I actually want to do some tests before I answer but unfortunately Blogger seem to be not having its best days these days. See Cannot change or edit template.

    Reason why I want to do 2 tests is because the answer to your question I believe will depend on the template but I need to be sure. If you want to pursue this matter, remind me in a few days.

    Peter Blog*Star
    Blogger Dough
    (Blogging helped my put 2 sons through college on my pension and if not for blogging, I would have been in financial difficulties. We want to help you do the same)

    ReplyDelete
  19. Hey thanks for the reply. I think I've managed it already. Went ahead and added the "height" code into the header code. It's still not self adjusting though. Oh well. Thanks alot anyways :D

    Btw, it's great that you're helping others with your tutorials :)

    PS: Yeaps, thats me playing the guitar :).

    ReplyDelete
  20. Hi Joy,

    OK you found the answer. But you didn't mentioned about anything on my comments regarding youths?

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  21. im new in blogger
    I found many answer here
    thank u
    i learn lot here

    ReplyDelete
  22. thanks alot for ur info

    ReplyDelete
  23. When i try to widen the main body of my blog, the sidebar gets moved to the very bottom of the page. Why does it do this and how can i fix it?

    ReplyDelete
  24. I just realized that my 3 column that looks great in Firefox does not work in IE. I have tried everything, I have read through your blog looking for the answer, I have looked at the source code for other 3 tier, I have changed size of columns, headers, everything but I can't get the 3rd column to move up in IE so I gave up and put it all back the way it was. Can you point me to where/how to fix that please!?! Thank you. it's http://hiporganicmama.blogspot.com btw

    ReplyDelete
  25. Very likely you have something in your posts or sidebar that is too wide for the column it is in. Refer to sidebar pushed to bottom of page or troubleshoot sidebar at bottom of the page

    ReplyDelete
  26. Hi! I finally figured out the 3 column template, but the only problem is my header will NOT widen up- I tried what you suggested but it won't budge. Please visit my site and try to help me??
    www.beautiful-vegan.blogspot.com

    Thanks,
    Lyn

    ReplyDelete
  27. You apparently are using a modified Rounders 4 3-column template. Rounders uses graphic to get the rounded column and this is harder to modify.

    ReplyDelete
  28. Hi! Peter,
    Need your help!

    I can't edit my post body width? i can edit sidebar ,header, footer, outer wrape except post body, Its seem does not change anything if i try to increase the px/% property.

    i can't edit/remove the adsense ready column at the top right sidebar? Seem default by the designer.

    Please take a look at my site: http://whatsoffer.blogspot.com

    You may email me to whatsoffer@gmail.com

    ReplyDelete
  29. I recently came across your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.


    Margaret

    http://guitarlearntoplay.net

    ReplyDelete
  30. I found your blog and helpful insights through Blogger search. I am trying to increase the size of my header photo, but am unable to find the size of my header. I have opened my blog up in Dashboard, but can't find a LAYOUT option, which you indicate is the way to find the header width. What should I do?

    ReplyDelete
  31. Hi, I use the following blog template
    Blogger Template Style
    Name: Simple
    Designer: Josh Peterson
    URL: www.noaesthetic.com

    and could not find tags like #sidebar or#sidebar-margin.

    in all the posts concerned with altering the width of blog, these 2 r mentioned. Can you help.

    Thank you for your time.

    ReplyDelete
  32. With the new template designer, changing width is as easy as click-hold-slid to the width you want. You don't need to go to the template. It can be done via the LAYOUT (DESIGN)

    ReplyDelete
  33. For me and my site that isn't working. Could someone please help? I'm trying to stretch a bigger image all across the top of the screen but while I can increase the size it will not go from left to right. I'm doing this at santiagoicc.org .

    Here's the code:

    ReplyDelete
  34. Here's the code:

    " ?/*

    Theme Name: 03 Plantilla Wordpress 3

    Theme URI: http://www.juguetipedia.com

    Description: Plantilla Wordpress 3

    Version: 1.0

    Author: http://www.juguetipedia.com

    Author URI: http://www.juguetipedia.com



    */





    /**********************************************************************************/


    a, a:hover { color: #8ab459; text-decoration: none; }


    #content {

    width: 720px ;

    overflow: hidden;

    text-align: left;

    border-top:solid 1px #CED4CA;

    border-bottom:solid 1px #CED4CA;

    border-left:solid 1px #CED4CA;

    border-right:solid 1px #CED4CA;

    float: left;

    margin: 5px;

    padding-top: 0px;

    padding-left: 15px;

    padding-right: 5px;

    padding-bottom: 30px;

    background: #ffffff url(images/header.jpg) no-repeat top left;

    }



    /********************************************************************************/


    #wrapper { padding-left: 30px; }




    #hode {

    width: 400px;

    color: #FFFFFF;

    height: 170px;

    text-align: left ;

    clear: both;

    margin: 5px;

    padding-top: 10px;

    padding-left: 0px;

    padding-right: 0px;

    padding-bottom: 0px;

    background: transparent;

    }


    body {

    width: 1000px;

    background: #F0F1EE url(images/back.gif) repeat-x;


    font: 11px "Lucida Sans Unicode", "Lucida Sans", verdana, arial, helvetica;

    color: #888;

    margin-top: 20px;

    margin-bottom: 20px;

    margin-left: auto;

    margin-right: auto;




    }




    #sidebar-1 {

    overflow: hidden;

    float: left;

    width: 150px;

    }
    #sidebar-2 {

    width: 170px;

    background: #ffffff url(images/header3.JPG) no-repeat top left;

    }

    #logo {

    width: 140px;

    padding:10px;

    }

    /********************************************************************************/

    .sidebar {

    text-align: left;

    padding-top: 10px;

    padding-left: 15px;

    padding-right: 15px;

    padding-bottom: 30px;

    border-top:solid 1px #CED4CA;

    border-bottom:solid 1px #CED4CA;

    border-left:solid 1px #CED4CA;

    border-right:solid 1px #CED4CA;

    float: left;

    margin: 5px;

    background: #ffffff;

    font-size: 0.9em;

    }



    ...

    ReplyDelete
  35. Seem like you are using a Wordpress template for a Blogger blog? Before that can be done, the template need to be edited and I am not the person to do it.

    ReplyDelete
  36. Can you help?
    I followed your instructions on scribd, and I have got the document on my blog.
    However the document is in a very small window and requires a lot of scrolling.
    I have tried changing the height and the scrolling parameters but this is not working.
    Here are the links
    http://www.scribd.com/doc/55602316/Iap-Guide-Book-on-Immunization-Iap-Immunization-Time-Table-2011

    And the blog post
    http://dailydose4kids.blogspot.com/2011/05/latest-indian-academy-of-pediatrics-iap.html

    Can you help ?

    ReplyDelete
  37. Would this Test embed Scribd pdf with iFrame be an improvement? From what I see to make it easily visible you will need to change your template to allow wider main column then editing the width and height when you get the embed script from Script.

    The other alternative is to provide for a link to the full screen off your blog.

    ReplyDelete
  38. i want to make my blog like your's 4 coulamn
    how can i and see my blog
    www.bcatmdu.blogspot.com
    and give me some sugestion to improve

    ReplyDelete
  39. Update your template to a template designer template and then go to LAYOUT to chose a 4 column template. Now very easy, no need to edit template

    ReplyDelete
  40. Hi Peter,
    I have been reading alot about your HTML code on this blog whenever I need to fix my blog but this time if you look at my blog
    www.winna-craftitude.blogspot.com

    The sidebar width which is orange is taking alot of space.

    I wanted to reduce the width of sidebars as it makes the main blog column clumsy.

    Thank you for your help.

    ReplyDelete
  41. Hey peter, some corrections.
    Its actually the orange background behind the main post which I wanted to reduce.

    Though I am not very good in explaining, but after seeing my blog you will understand maybe.

    Thanks again
    Liang

    ReplyDelete
  42. Hi Winna, are you using the Template Designer template? If so the solution is very simple - Dashboard > Design > Template Designer > Adjust width.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics