4 column Hybrid shape with an Outlook.com hack

A few people have asked me for more Hybrid shapes and I keep Slacking…. cool gifs to co-workers instead, amirite?! Sorry…

Anyway, here we are: this is a quick example of a 4 column stacking 2×2 without the need for media queries. This is also a little more fun than a regular block, as we have expanded upon the Campaign Monitor method of centering without media queries (really can’t explain how useful that post has been) again and this time removed the need for a fixed width on the div element.

It isn’t the end of the world to have inline divs with fixed widths, but I was interested to find a workaround to try and make the code a little bit more flexible and therefore easier to integrate with tools. As with all templates, too many rigid/hidden parts make the template inflexible and ultimately less robust.

Less chitchat more code already: http://codepen.io/actionrocket/pen/EoCLH


Here we have a Hybrid wrapper as per usual, but this differs in the way that the “true width” is greater than previous templates. This is so that the guttering either side of each block is equal, for when the two stack together.

So imagine drawing in a 10 px gutter in the code either side of the block. the block is 320px and there’s margin left and right of 10px. Quick way to think of it is that margin is applied outside the element and padding is inside. Visually the email will appear to be 660px width (20 + 300 + 20 + 300 + 20), but actually the 2nd wrapper will be 680px (10 + 20 + 300 + 20 + 300 + 20 + 10).

The next thing that might look a bit different is the inclusion of a CSS class called .marginhack. This seems weird as the class name doesn’t appear to correlate with what is in the HTML, however, in the webmail client Outlook.com .marginhack will become .excmarginhack and then be processed (and only in Outlook.com).

Reason for this is that the flexible divs are working out, because the margin property is keeping it honest – and margin is super unreliable in Outlook.com and yet actually really good everywhere else. So, we re-inject spacing in Outlook.com only with padding, and this means we are reducing the number of rigid, ‘fixed width’ items.

It’s what Tuesday nights were made for.

As ever, let us know how you get on in the comments below, this is quite a simple shape/section – but combine them all, and you have a pretty powerful email template that doesn’t rely upon media queries to optimise layout.