Friday, October 24, 2008

Troubleshooting 3 column Minima layout

Custom 3 column Minima Blogger templates are very popular, but a lot of people seem to run into problems when trying to implement them. Here are some of the common problems and fixes.

The perils of margins and padding

In CSS when you apply padding and/or margins to a div element, you are actually adding the width and height of the margins and/or padding to the overall width and height of the div.

Say for example you have the following CSS:

#sidebar-wrapper {
width: 300px;
padding: 20px;
margin: 20px;
}

So how wide is the above #sidebar-wrapper div? If you answered 300px then you have made a common mistake.

The correct answer is: 300px + 20px (margin-left) + 20px (margin-right) + 20px (padding-left) + 20px (padding-right) = a total width of 380px!

Naturally if you forgot to factor this into your 3 column Minima template design you will likely have floating columns sitting underneath one another because the containing wrapper (often called #outer-wrapper) isn’t wide enough to accommodate them side by side.

So if you want the overall width of your #sidebar-wrapper to be 300px with the same padding and margins as the example above you would use the following CSS:

#sidebar-wrapper {
width: 220px;
padding: 20px;
margin: 20px;
}

In other words you add up all your margins and padding: 20px (margin-left) + 20px (margin-right) + 20px (padding-left) + 20px (padding-right) = 80px and then subtract it from your overall #sidebar-wrapper width: 300px – 80px = 220px.

Watch those borders

Like margins and padding, CSS borders are also added to the overall width and height of a div element. Say, for example, you have a #sidebar-wrapper div element with a width of 300px and a 1px border. How wide is the div?

300px + 1px (left-border) + 1px (right-border) = 302px

So if you want your #sidebar-wrapper to have a total width of 300px but you also want it to have 1px borders, you’d have to subtract the border width:

300px – 2px (sum of right and left borders) = 298px

The dreaded ‘Internet Explorer Double Float margin Bug’

If you are still using IE6 – firstly – shame on you! It’s an outdated, antiquated browser that has a variety of horrible idiosyncrasies. You should update to the latest version of Firefox, IE or Safari.

If you insist on using IE6 then be aware of the ‘IE Double Float margin Bug.’ This basically means that if you view a site in IE6 that has floating div elements with margins – IE6 will double the margin of the first float which usually pushes one of the div floats underneath. The end result is ugly and weird looking. You can get around this by putting in some conditional comments.

If for example you have a 3 column Minima blogger template with 3 floating div elements, the first of which, let’s call it #sidebar-wrapper, has a left margin of 28px then you would put the following conditional comment in the header section of your template:

<!--[if lte IE 6]>
<style>
#sidebar-wrapper {
margin-left: 14px;
}
</style>
<![EndIf]-->

This means – if the browser is less than or equal to (lte) IE6 then the left margin of the #sidebar-wrapper should be 14px (half of 28px). This should avoid the problem for those viewing your site in IE6. All other (newer) browsers will ignore the conditional statement and display the page as normal.

Conclusion

If you are having problems with your 3 column Minima custom blogger templates always:
  1. Check your margins and padding.
  2. Make sure you also factor in border widths.
  3. Check your browser version and if necessary add an IE conditional comment.
Hope this helps. Oh - you can find my original post which tells you how to create a Blogger 3 column Minima layout here.

26 comments:

  1. Thanks for your site. Very helpful. I have a blog at kingpolitics.com

    I haven't figured out how to adjust the size of individual post titles. I would also like to underline these individual post titles.

    Thanks in advance.

    ReplyDelete
  2. Thanks for the positive feedback mate!

    With regard to post titles - I'm not sure you can customize individual post titles but you can do anything you want to the titles as a whole.

    Just find the .post h3 style rule in your blogger template and style it any way you want. You can also add styles to the title's various states i.e. .post h3 a:visited, .post h3 a:hover and so on.

    If you really want to know more about this let me know and I'll put together a post.

    ReplyDelete
  3. Julian, this information has been very helpful for me -- especially since I am NOT very computer savvy. The only problem I'm having now is adjusting the widths of my sidebars, particularly the right sidebar-- I need that one a little wider to hold images. Did all the math you suggested but am still not getting it right.

    M blog: http://www.enchantedheartsstudio.blogspot.com

    Thank you for any suggestions you may have!

    ReplyDelete
  4. Cris I will take a look at it for you in the next couple of days. I just have a bit of pressing work currently.

    ReplyDelete
  5. Would you consider sending me the code for your 3 column so I can just copy and paste it myself? For some reason following your directions is not working and I'm not sure why.
    Thanks! :)

    ReplyDelete
  6. Would you consider sending me the code for your 3 column so I can just copy and paste it myself? For some reason following your directions is not working and I'm not sure why.
    Thanks! :)

    ReplyDelete
  7. LeAnne: I'll take a look at your blog and see if I can find the problem. I'll get back to you shortly.

    ReplyDelete
  8. LeAnne: I took a look at your blog and it seems to be the "Rounders" blogger template, not the "Minima" template.

    I'll have to do a new post detailing the 3 column layout process for the Rounders template. It's quite different to Minima.

    In the meantime - do a search for "Blogger 3 colum Rounders layout" - you should come up with something.

    ReplyDelete
  9. Hi!

    I've been trying to follow your instructions for adding a third column, but when I'm through with them it doesn't work. I'll try to translate blogger's message into english and maybe you know where the problem might be...

    Something like: "Unvalid variable declaration in the shell of the page: The variable is being used but isn't defined. Indata: startSide"

    Hope you can help me. I'm not sure if the width of the blog posts have anything to do with it. The blog posts in the print screen shots in your tutorial look a bit wider than my blogposts. I'd like to keep my posts as wide as they are, if that's possible, just adding that left column.

    Thanks! :)

    ReplyDelete
  10. Moa: it's hard to say without looking at your full Blogger template. If you want to send me an email with the full template attached I'll see whether I can fix it for you.

    Cheers
    Julian

    ReplyDelete
  11. Thanks Julian,

    I tried fiddling with it but to know avail. When you go to my blog it's hard to tell post titles from the post itself. Below is my html. Thanks in advance.

    .post h3 {
    margin:1.25em 0 0;
    padding:0 0 10px;
    font-size:300%;
    font-family: "Trebuchet MS";
    font-weight:normal;
    line-height:3.4em;
    color:00FF00;

    ReplyDelete
  12. I'm having the same problem as Cris...I need to tweak the size of my sidebars just a bit so my widgets will fit, but I'm afraid to tinker too much. Would you take a look? Thanks!

    grassrootshomeschool.blogspot.com

    ReplyDelete
  13. Saille,

    Don't be scared to tinker - that's how you will learn it!

    Just make sure you backup your template first.

    So long as everything adds up - div width + margins + padding etc. - you should be fine.

    Give it a go :-)

    ReplyDelete
  14. Julian,
    I have followed your instructions to change to a 3 column template, but when finished, I get this error message: We were unable to save your template
    Please correct the error below, and submit your template again.
    The new widget id "NewProfile" is invalid for type: Profile. I would appreciate any help you can give.

    Yours is the third site I have used to do this, and I have received an error each time I try to save the changes. By the way, your instructions are the easiest to follow that I have tried.

    Robin
    robinsblessednest.blogspot.com

    ReplyDelete
  15. Hi Robin,

    Hmmm - try the following:

    Change the new widget id from "NewProfile" to "Profile2"

    Let me know if this works.

    Cheers
    Julian

    ReplyDelete
  16. I used your tutorial for converting the 2 col. Minima to 3 col. and it worked great. I also used your tips here to change the sizing of my other 2-col minima blog with success except that the description of the blog is now off-center. I have tried comparing the html of the default template with mine and I can't see what is different.

    This is what I believe is the relevant code:

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

    And here is the blog:
    http://luminajewelry.blogspot.com/

    Any suggestions would be most welcome!

    Thanks.

    ReplyDelete
  17. Hi. I followed your tutorial to make my blog 3 columns. I then tried to play around with the column widths a bit so I could get wider sides and a thinner main section. I seem to have done something to me 'followers' gadget. Do you know if this has a necessary width or something? My blog is buttonsbyloulou.blogspot.com Thanks.

    ReplyDelete
  18. Sorry, must be a coincidence. I had a look around and no one's 'followers' is working. Thanks. Lou.

    ReplyDelete
  19. Hi Julian. I got a problem with IE6. Right margin contents are pushed to the bottom of my page. Please help.

    Any help would be very much appreciated.

    Thanks!

    ReplyDelete
  20. Hi Julian,
    I completed the 3 blog layout for the 2nd time and still no luck. I am following all the directions and I do not get an error message. I save the changes and then try and look at my templete/blog and it is still 2 columns. Do you think you could take a look at mine? Thanks! I can email you my templete. Thanks for your time and talent!

    ReplyDelete
  21. Anyone with questions should post them on the home page of this blog. Julian answered mine there.

    ReplyDelete
  22. for some reason this code works but it does not center the photo i upload for the title header. any suggestions? i'm pulling my hair out trying to just get the format for my blog ready.

    ReplyDelete
  23. Sara:

    Try giving the header image a width in your template (you'll need to substitute the actual width below), for example:

    #header img {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    }

    Let me know if this works.
    Regards
    Julian

    ReplyDelete
  24. Julian- that was really sweet of you to reply so quickly. i just added that code and sadly it didnt work. i've been working on this for 3 days now trying different codes and .xml templates but nothing seems to work right. do you have any more tips? i really appreciate it- i may just need to buck up and go back to a 2 column.

    ReplyDelete
  25. Sara:

    Hmmm, that's odd - the only way I could see what's going on would be if you send me a copy of your template and I have a look at it on my test blog.

    Julian

    ReplyDelete