This was a technique discovered while we were working on Canvas. While it didn’t make it into the final product, we think it’s worth sharing anyway.

Getting responsive emails to look nice in the Gmail app is a never-ending challenge because of its infamous lack of support for media queries. I’ve previously blogged and written about ways to get a fluid email to look great in the app, but it comes at a design cost; you have to keep one column fairly narrow so that the other column will be wider than a mobile viewport and thus, when viewed on a mobile screen, take up 100% of the screen.

But what everyone wants to do, of course, is have equal-width columns that stack. Often this is achieved by using the align attribute to ‘float’ one table to the left and one to the right, but when viewed in the Gmail app (especially on larger mobiles), these aligned tables retain their positions, with undesirable results:

The solution that we discovered is to use display:inline-block in combination with text-align:center to get your elements to behave as if they are floating but centered. This just takes a little bit of fiddling to your overall template to get this to work.

Start with the fluid method

You need to create a table that is 100% wide with a max-width of your desired size on desktop.

<table class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;">

Then, to appease Apple Mail, which doesn’t respect max-width, create a media query to limit that table’s size on desktop:

@media screen and (min-width: 601px) {
	.container {
		width: 600px!important;

And wrap the whole table in some conditional code to appease Outlook, Lotus Notes and clients that render with IE:

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">

(your table here)

<!--[if (gte mso 9)|(IE)]>

Our secret weapons:
Using text-align:center and display:inline-block

Add the following styles to the TD of the ‘container’ table:

<td style="text-align: center; vertical-align: top; font-size: 0;">

The text-align: center is simply to get the contents of the cell to be centered (our desired effect), and the vertical-align property is your choice of value. The font-size: 0 is to fix a spacing bug where space can sometimes appear between inline-block elements, which we’ll be placing inside.

Now we need to start another table for Outlook/IE inside this cell. We’ll add another conditional table the same as our first:

<!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">

Now, inside our cell (and our conditional cell), we’re going to place some divs with a display: inline-block property. As inline-block elements, they’ll obey the text-align property on the containing cell (text-align affects all inline or inline-block elements in a container).

<div style="width: 300px; display: inline-block; vertical-align: top;"></div>

The most important things are to set a width (no more than half the width of the container) and to set the display to inline-block. The vertical-align is up to you depending on your layout.

Then inside this div, you can place your content inside a table.

<table width="100%">
		<td style="font-size: 12px;">

You will need to apply a font-size to your table contents because we set it to zero on the container cell.

In between each of these divs, we’re going to pretend to Outlook that we’re closing our conditional table’s cell and opening a new one:

<!--[if (gte mso 9)|(IE)]>

Then repeat your div to create another column. In our case we are creating two, so we’ll add one more.

Finally, we’ll close our conditional table

<!--[if (gte mso 9)|(IE)]>

Now you have multiple blocks inside a cell that will reflow to fit the viewport. You can add as many inline-block divs as you like, but if you add multiple rows’ worth, you will need to start a new conditional row for our Outlook table by inserting this code:

<!--[if (gte mso 9)|(IE)]></td></tr><tr><td><![endif]-->


Here is how to visualize all our conditional jiggery-pokery:

See this in JSFiddle

And now you’ll have centered blocks in the Gmail app, as well as other apps that don’t support media queries, such as app and the Yahoo! mail app. You can then add media queries (for those clients that support them) to make the divs 100% of the width of the viewport.

Send beautiful email campaigns Campaign Monitor makes it easy to attract subscribers, send them beautiful email campaigns, and see stunning reports on the results. GET STARTED FOR FREE
  • Nicholai

    I love this…but I’m wondering about font sizing. Is there a way to increase the font size for the Gmail app?

  • Ros Hodgekiss

    Hi Nicholai, if I understand correctly, you can change the font size by nesting your text in either something like < td 12px;" > or < span 12px;" >. Let us know how you go :)

  • Bram de Haan

    link to JSFiddle doesn’t work for me

  • Sergiu

    how will this look in yahoo and outlook 2002-2003? i know that they break everything!

  • Ros Hodgekiss

    @Bram – Sorry about that, JSFiddle is unfortunately experiencing a DDOS attack at this time, so you might want to follow them on Twitter for updates. Hopefully we’ll have this code available to you soon.

    @Sergiu – Hah, great question! My reasonably-educated guess is that it will work in older Outlooks too, as they use IE for their rendering (and should make use of the conditional comments above). Yahoo isn’t too bad, either – as it supports max-width & min-width, I can’t see why it wouldn’t work out. As always, test test test :D

  • Julio

    AMAZING! I’ve been trying to get this work across a lot of clients. Thank you so much for sharing.

  • William Visalli

    I tested this solution and it seems to work in most everything but Yahoo renders it like it would appear on mobile, stacking the columns. Granted I’ve only done a quick and dirty test of the above code, but didn’t know if anyone else had seen this and found a fix.

  • Ros Hodgekiss

    Hi there William, you’re more than welcome to post your code in our forums, as we have an active community there (including ourselves) that would love to take a look and suggest fixes. Hopefully we’ll see you there!

  • Nicole Merlin

    @Sergiu This method definitely works in Yahoo, Outlook 2000/2002/2003 and it will even be responsive in the Yahoo app on smartphones. The conditional code takes care of every version of Outlook.

    @William: Yahoo has always tested fine with this method, is your browser window perhaps a little small? As soon as your viewing area for the email is narrower than the outer table (600px in this case), everything will start to stack, as it’s intended. If that’s not the problem then definitely jump in the forums and let us know!

  • Teresa

    Is there a way to get this to work if the columns are not equal widths? say one is larger than the other column.

  • Ros Hodgekiss

    Hi there Teresa, sorry for the late response here. To confirm, the columns can be any width – even or uneven – for this technique to work. Let us know how you go :)

  • Adam

    Great tutorial! Is it possible you could show all of the HTML together? It makes it easier for me to see.

    Also, I am a little confused regarding multiple rows. An example of this would be great!


  • Richard Bland

    @Nicole, Hello, I am trying to get my head around this solution in a real world build. Do you have any examples of a full layout, with single columns for example? I am struggling to not have to use media queries for say a single column section which will need to conform to the 300px width we have applied to these two columns. Any ideas? Do I go ahead and just use media queries?

  • Ros Hodgekiss

    Hi there Adam and Richard, check out the JSFiddle we linked to above. There’s an instructive example there with a multiple-row layout. Let us know if you still have any questions :)

    Richard, if still stuck, feel free to post your code in our forums, with a few notes on where you’re seeing issues. We’d be happy to walk through it with you and provide hints where we can.

  • Ricky Gipson

    This solution works great! Quick question.

    I have two columns – text on the left and image on the right. I need them to stack image on the top and text on the bottom. Has there been a solution that would work based off this method?

    With just using the method above it stacks text on top and image on bottom.

    Thanks for any help you can provide.

  • Ros Hodgekiss

    Hi there Ricky, there are two things you can try:

    1. Changing the order of table stacking using dir=rtl (recommended)

    2. Making the image inline and using this technique to have the text flow around it – while the image should display inline in desktop clients, it should slip above/below the copy on mobile

    Let us know how you go and best of luck!

  • Nicole Merlin

    @Richard — I also wrote a tutorial over at Tuts+ that you can check out here. It should answer your questions. I wrote it before discovering this trick though, so it doesn’t include a method for centering like this article does. They would be best used together :)

    @Adam — when using multiple rows, you just need to pretend to Outlook (using more conditional code) that you are closing the row and starting a new one. Always make sure you have the same number of columns in each row in your conditional code. Here’s a quick example.

  • Roy van Slooten

    Great tutorial.

    Just one heads up!
    In the first line of code on this page:

    Are two different types of quotes.

    Because of this the two divs would only stack at first.

  • Roy van Slooten

    Seems I can use HTML in the comments.

    I mean this one:
    table class=”container” width=”100%” cellpadding=”0” cellspacing=”0” style=”max-width: 600px;”

    Kind regards

  • Ros Hodgekiss

    Hi there Roy, thanks for pointing out the “smart quotes” here – it looks like those were missed when we pasted the blog post into our CMS. I’ve fixed this up now, so all the code samples should have regular quotes now. Thanks for that!

  • iam grimus

    Thanks for the article.

    Based on my Litmus test Gmail (explorer, chrome, firefox) and Yahoo (explorer, chrome, firefox) are all rendering the code as a single column stack.

    I am I doing something wrong or is this the desired behavior for these email clients?


  • Iam grimus

    Has anyone tested this coding approach in Litmus? If so are you seeing similar results to what I posted above?

    Thanks for the help

  • Ros Hodgekiss

    Hi there Iam, this isn’t the intended behavior, so I suspect this might have something to do with the preview pane being narrow enough in Litmus to force the “1 column layout” to appear. Have you tried a live test in Gmail / Yahoo, with the same results?

  • Jerry

    Iam: for that very reason, we stopped using this trick; it’s just not worth the headaches that we encountered in Gmail as used on the smaller laptop screens. Nowadays, we just make sure that the email sizes down properly in the Gmail app while at the same time, the email is awesome in the native iOS and Android mail apps.

  • Iam grimus

    Thanks Ros, I can’t believe that did not occur to me. I will have to do more live testing. I really appreciate you getting back to me here. Responsive design can be such a pain.

    Jerry, thanks for your comment. I can see that as a legitimate option. However, I would argue that the “correct design” will allow for the flexibility of all preview pains and small screen devices. In my opinion your trading a better user experience for less headaches in the development stage.

    Cheers, and thanks for the comments.

  • Chris Lock

    This is such a great post, couple it with your blog post here (–webdesign-12978#disqus_thread) and this is so powerful.

    Re: Iam – Please let us know the results of your findings, I’m interested to know as I’m seeing the same thing.

    Aside from this, seems to work perfectly – so now I need to make this work with 3 or 4 columns! Has anyone managed to do this at all? When I tried a similar approach with 3 columns, Gmail decides to only drop the third column onto the second row.

  • Nicole Merlin

    @Jerry — totally understand your comments regarding the fact that you end up seeing the stacked version of the email when you’re in any client on a small screen. It’s a tough one, because that is 100% how this method is designed to work, and in my opinion it’s a better if someone on a really small laptop screen sees the responsive version of an email, designed for the amount of space they have available, rather than them having to scroll sideways. But I understand that we are so used to seeing the “desktop version” in webmail and that it can be confusing to start seeing responsive behaviour in Gmail or Yahoo. But if you design for this scenario, I think it’s a million times better.

    @Ian Grimus — I think this is what you are saying too, and I agree with you.

    @Chris Lock — Thanks so much for your kind words! You are spot on to use both tutorials together :) I hope to write a unified version soon.

    You can definitely use this approach with any number of columns, but unfortunately you can’t control the fact that sometimes the width of the viewport means that just one of the columns bumps down to the next row. The only real way to get around this is to always use two columns, or to fake 4 columns by putting two columns into one (example here).

  • Jerry

    Iam: I agree 100% that we are probably trading usability for less headaches, but unfortunately, with how things work on my team, that’s just the way things have to be. The main issue is that we don’t always have control over the design that we are coding and any advice given to the client tends to fall on deaf ears. It’s better when we are doing the designing and coding of the email, though.

  • Nicole Merlin

    Sorry — I noticed that I had written the wrong names next to some of my replies, and I have edited my previous comment so that it is now correct :)

  • Jerry

    Nicole: There is no side scrolling in Gmail desktop and/or the Gmail app with our messages as they shrink down to fit small real estate availability. For the most part, this really isn’t an issue, but if a customer insists on having a four column layout (say, four products on a row), it could be an issue with those that require reading glasses using a small smartphone. For our customers, though, that’s better than having three products on the row and one bumping down to a new row. That tends to get really ugly if the customer’s message has four rows of products in it.

  • stephen barrett

    This works for me somewhat… But when it test this in a mobile emulator the tables do not collapse?

  • Ros Hodgekiss

    Hi there stephen, this is really curious! We’d love to see what you’re experiencing here, so by all means, kindly contact our team with emulator/email client details if you’d like us to take a look.

  • Sumeet Kakani

    Hi there,

    I have implemented the code mentioned above and tested it across different clients. So far it’s working in all clients except for windows phone. In windows phone 8, I want to maintain the two column layout and not single column layout, because windows phone does not zoom the content. Can I do that?

  • Ros Hodgekiss

    Hi Sumeet, although it may not be in the spirit of this article, you may want to create a media query specifically for Windows Phone 8. The following two articles will help you do this for different handsets:
    Responsive Design in IE10 on Windows Phone 8
    Windows Phone 8 has FULL CSS3/Media Query Support

    Let us know how you go :)

  • Paul van Steenoven

    I managed to remove the font-size: 0 (spam sensitive) by joining the conditional comment to the DIV tags. Also using the lang tag and deviceWidth fixed width in styles, its now fluid on gmail. :)

  • Sumeet Kakani

    Hi Nicole,

    I have used you solution and it works perfectly. But I have one problem. In my HTML, I have alternate image and text in the tables (e.g. In the two sub tables, I have text in first tabel and image in second table and for next it will be image in first table and text in second table). So in the mobile view, it looks like text-image-image-text. But I want it to display like image-text-image-text. Can you help please?

  • Ros Hodgekiss

    Hi there Sumeet, have you tried using the dir attribute (eg. dir=”rtl”) to change the order of your content? We’ve outlined this technique here – let us know how you go :)

  • Sumeet Kakani

    I tried the same thing yesterday and it worked for me…thanks for your quick response, really appreciate :)

  • Raskoln

    Hi Ros

    First of all thanks for this trick, it helped me greatly. However there is one thing I’d like to add to save some headache for others.

    In cases where your columns only contain image content things can get strange. If those images set to responsive behavior this inline-block div might act like it’s empty. Some clients(android, some apple ones) take this as an empty div also therefore hides them.

    In this situation setting a min-width to the images helped me. I almost killed myself before I found this. It’s probably common knowledge but wanted to share in case someone runs into this issue.

  • Ros Hodgekiss

    Thank you so much for sharing this, Raskoln – I’m sure your hard work will certainly help others! Hope things are looking more positive with your email design now :)

  • Vic Dinovici

    Hi Ros,
    the borders are showing only in Outlook 2011 and 2015, no borders in other Outlook versions and some other email clients as well. Also in Gmai (IE, Firefox, Chrome), the 2 tables are stacked on desktop and no borders are showing. In Yahoo you can see something like a 3rd column on the right.

  • Ros Hodgekiss

    Very interesting, Vic – any chance you can share your findings on the forums? We’d love to take a look!

  • MarkL

    Ros, how would you modify your code (JSFiddle) to do a 3-column layout?

  • Ros Hodgekiss

    Hi Mark, I’ll look to getting this JSFiddle/post updated to answer this question; in the time being, I really recommend you take a look at the code used for this 3-column layout created using our email template builder. I think you’ll find the answers you’re after there :)

  • MarkL

    Ros, that layout is not fluid in Gmail app. Moreover, it’s not responsive in Android’s built-in client (4.x) and alignment of the last block in iOS built-in client (8.x) is off. Unfortunately it’s a poor example :)

    If you could update your example with a 3-column layout, that would be sweet, especially since it’s fluid in Gmail app (columns collapse).

  • Özgün

    I personally avoid placing the tables as siblings. For me it’s always better to stick with table cells :) I’ll try this method on my next project.


  • DMA

    Has anyone resolved the 3 column issue please?

    In particular 2 equal width with one ‘spacer’ in the middle..?

    Fingers crossed…!!

  • Brett

    This doesn’t work for Outlook 2007, 2010 and 2013. I’ve tried everything to get it to work and the columns stack.

  • Ros Hodgekiss

    Hi DMA and Brett, would it be possible for you to post your code in our forums? We’d love to take a look at why this isn’t working as desired. Thank you so much!

  • Leon St Claire Antoine

    Following on from Brett’s post (23rd April) I did look for a post to the forum on this but I was unsuccessful. Please could someone point me in the right direction?

  • Ros Hodgekiss

    Hi there Leon, I’m sorry you couldn’t find the answers you were after. If you aren’t comfortable posting to the forums, we’re happy for you to send your campaign to our team. While we can’t always solve email coding issues, one of us may be able to point you in the right direction. Best of luck!

  • Sumeet Kakani

    Hi Ros,

    I am using this trick and it works well in all clients except Gmail for Windows Mobile. In that client, the two column layout splits into single column, but Windows mobile does not zoom the email content and renders it as a desktop view. Due to this, the single column layout looks too small as as it does not fit-in with device size. Any solution to this issue?

    Thanks in advance! :)

  • Ros Hodgekiss

    Hi Sumeet, that’s very interesting! You might want to take a look at the meta tag fix in our forums – a few people have noted that it has really helped achieve more consistent rendering on Windows Phone.

  • Leon St Claire Antoine

    I have found that the code does not render correctly in Outlook 2011 for Mac?

    I have read that Outlook 2011 for Mac uses:

    @media screen and (-webkit-min-device-pixel-ratio:0) {

    to render HTML and I have included this in the head tag but it is still not working? Any solution to this issue?

    Thanks in advance! :)

  • Leon St Claire Antoine

    Found a solution:

    I hope this also helps someone else who may have a similar problem

  • Leon St Claire Antoine

    On 20th April DMA asked whether the code could be adapted to include
    3 columns. Has anyone been able to come up with anything?

  • Ros Hodgekiss

    Hi Leon, you may want to check in on our forums – you might find some great advice there! Alternately, our email builder offers very versatile 3-column layouts, so you should certainly give that a try. Best of luck!

  • Sarah Shuda

    Has anyone been able to add a background color behind the table with the multiple columns? I’m struggling to make that work. I’m working on a 4 column product focused email (quite the challenge).

  • Sarah Shuda

    I’m also wondering if anyone has gotten a 4 column, 4 row layout to work with images? Would love to see an example that works in all versions of Outlook. I cannot get more than two rows to display correctly in all versions of Outlook.

  • Fred Testard

    Thanks a lot for sharing !
    What’s great with test is that gain or lose… you still learn something, well do you ?
    One question that I always have for marketers running tests is:
    Ok, you’ve noticed an uplift on Opens or Clicks… but from whom ?
    Did you get more opens from your prospects or from your customer ?
    And in the process did you get more or less engagement from your high value customers ?
    Test is a double sided weapon:
    – Very powerful when used properly and definitely a quick win
    – Very dangerous if you draw the wrong conclusion from it

  • Fio

    Can I ask why you did not read the results the other way around?

    If the personalised approach worked just as well as the non-personalised one, arguably you could have tried to optimise the personalised email further to see if you would discover a ‘truer’ maximum in a follow-up test. In fact, I don’t think you can infer that “the personalised approach doesn’t work” for your audience from this result, and I wonder how/why you made this assumption.

  • Aaron Beashel

    Hey Fio

    It’s a great point that you make in that we could have tried to optimize the personal approach email to find a higher maximum.

    The reason we didn’t really comes down to our brand. When people subscribe to the blog, they subscribe to hear from Campaign Monitor rather than ‘Aaron from Campaign Monitor’, so we’d actually rather take the summary approach than the personal one.

    The purpose of the test was to see whether we were missing *significant* click-throughs by not taking the personal approach. Given that we found we weren’t, we’ll continue using the summary approach as we feel thats the best method for our wider brand and marketing goals.

    Hope that answers your insightful question.


  • opticien skikda algerie

    The template I made doesn’t have any code in it about the navbar. I’d like to bring it back. What code do I put in to show the Navbar in blogger?.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free