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.

  • https://www.e-village.nl Wilbert Heinen

    Nice one, Mike! You could use Margin with a capital M instead of the marginhack class. This actually works (or worked a couple of months ago) in outlook.com.

  • http://bhambrabland.co.uk Richard Bland

    So is hybrid the way people are going now with their mobile optimised templates? I’ve been out of action for just over a month and I have seemed to missed this!? Can someone point me in the direction of a fully working template for me to pick apart and test. Thanks kindly http://bhambrabland.co.uk

  • Nicholas Rowan

    Nice Mike. Your posts are always a pleasure to read.

  • http://labs.actionrocket.co/ Mike Ragan

    Hi Wilbert! Thanks for the comment. I love that hack, but it feels almost “too hacky” (as if!) as in I fear that it won’t last and would be a nightmare to debug down the line. This example is trying to use code that is easier for non hybrid guys to use and not break (fewer rigid blocks). Let’s see how Outlook gets on – it’s in constant flux, but we are ready for it!

  • http://labs.actionrocket.co/ Mike Ragan

    Hi Richard, Hybrid is the way we are going for sure! However, it isn’t necessarily the right option for every client. There are a number of factors which we consider even before the design process, such as: how the email will be used, what the audience is, ESP used, skill level of production team, maintenance of template, how dynamic content is pulled in etc etc. We send out a Hybrid email every week, sign up at emailweekly.co

  • http://labs.actionrocket.co/ Mike Ragan

    Hey Nick – long time no see :) Thank you for your kind words – I like getting comments/tweets and stuff – keeping the email conversation going is always good.

  • http://bhambrabland.co.uk Richard Bland

    Been a registered receiver for some time now. Thanks Mike, much appreciated.

  • https://www.e-village.nl Wilbert Heinen

    Sounds fair enough!

  • stephen

    Does anyone have a good solution for 3 colums with this method? I can get it working but the issue is having a fixed width in gmail app of lets say 200px doesnt look great when it stacks into one column

  • crystal lineberry

    Interesting post ! Apropos if others a a form , my family filled out and faxed a fillable version here https://goo.gl/K6iIqg.