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.