HI,

I have a problem with either the table, cell or image expanding to 100% in outlook 2007, 2010 and 2013 rahter than being in three colums like it should (as does in all the other browsers). Its designed to stack when the screen size is below 600px but it isnt working in these outlook browsers for some reason.

Any suggestions?

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Responsive HTML email base template</title>

        <style type="text/css">
        @media only screen and (max-width:599px) {
            table.container {width:100% !important;}
            table.expand {width:100% !important; margin-right:0px !important} 
            td.featureimage {width:100% !important;}
            .imageheight {height:auto !important; max-width:100% !important}
            body{width:100% !important; min-width:100% !important;}
            table td { border-collapse: collapse; }


        </style>
    </head> 
    <body bgcolor="#efefef">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#efefef">
    <tr>
      <td>

      <table width="600" class="container" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr>
      <td valign="top" class="row1" style="padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; background-color:#efefef;">
      <p style="font-size:11px; color:#606060; font-weight:normal; margin-top:0px; margin-bottom:0px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">Header information</p>
      </td>
    </tr>
    <tr>
      <td valign="top" bgcolor="#f5f2e5" class="banner">
        <img src="http://www.impressdesign.com.au/clients/IMP/HTMLemail/header.jpg" width="100%" class="imageheight" style="max-width:100%" alt=""/></td>
    </tr>
    <tr>
    <td style="padding:20px;">
    <p style="font-size:14px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:10px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">Es magnim volupta sperferovit occum num inienimin pe sequae estiunt volendebit et apis quibusa ndant, sit quo voloreptati conet odit aut ut plandeb itatem que nulparc hiliquam faceperum, con rem remporum, suntur, corum num quia volessed quunt acest et qui diciminto berum sercipsa nulparum apiet magnimus as vel intur alitium, cum exped etur alignati sum erore dolupicat.</p>
    <p style="font-size:14px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:0px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">      Mint reria dolore voluptatur senimagnist, est, sus, alianto eumquo estio que nosae cuptatio. Itae conescimus et voloreriam in cullupta doloribus adit ipiet occus aut aut que pre re eiciisciae que asit, officia que parum dionem fuga. Itatis eaqui blabo. Nequasi quatiae assumquos molecta dolectatibus nos aditassed quo coriatemque odita quasperorro dolupti te pliquis molupta tenimod ionsed moluptatenis exero ium sinci ulpa doloreh endicturia pe nullaute sit molor re, que eatur rem rehenistem quunt, natis aliquis di omnis eicia incipid qui debit fuga. Everchil et occaepudam re coremporia cone natur re expliciis eum etus iundunda vendias inverae pro te iducimus eos mosame eum, quo modissusdae maximag natusam utatus enihil maionseque ellabo.
    </p>
      </td>
    </tr>
    <tr>
      <td style="padding-left:20px; padding-right:20px;">
      <table class="expand" width="175" align="left" border="0" cellspacing="0" cellpadding="0" style="margin-right:15px;">
    <tr style="width:175px;" class="expand">
        <td valign="top" width="175px" style="padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #000000;">
            <img src="http://www.impressdesign.com.au/clients/IMP/HTMLemail/header.jpg" style="width:100%; height:auto; max-width:175px;" class="imageheight">
    <tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:0px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">Es magnim volupta sperferovit occum num inienimin pe sequae estiunt volendebit et apis quibusa ndant, sit quo voloreptati </p>
    </td>
    </tr>
<tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:0px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:10px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="#" style="color:#414141;">Learn more</a></p>
    </td>
    </tr>
</table>

<table class="expand" width="175px" align="left" border="0" cellspacing="0" cellpadding="0" style="margin-right:15px;">
    <tr style="width:175px;" class="expand">
        <td valign="top" width="175" style="padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #000000;">
            <img src="http://www.impressdesign.com.au/clients/IMP/HTMLemail/header.jpg" style="width:100%; height:auto; max-width:175px;" class="imageheight">
    <tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:0px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">Es magnim volupta sperferovit occum num inienimin pe sequae estiunt volendebit et apis quibusa ndant, sit quo voloreptati </p>
    </td>
    </tr>
<tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:0px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:10px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="#" style="color:#414141;">Learn more</a></p>
    </td>
    </tr>
</table>

<table class="expand" width="175px" align="left" border="0" cellspacing="0" cellpadding="0">
    <tr style="width:175px;" class="expand">
        <td valign="top" width="175" style="padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #000000;">
            <img src="http://www.impressdesign.com.au/clients/IMP/HTMLemail/header.jpg" style="width:100%; height:auto; max-width:175px;" class="imageheight">
    <tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:10px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:0px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;">Es magnim volupta sperferovit occum num inienimin pe sequae estiunt volendebit et apis quibusa ndant, sit quo voloreptati </p>
    </td>
    </tr>
<tr>
    <td style="padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:0px;">
     <p style="font-size:12px; color:#414141; font-weight:normal; margin-top:0px; margin-bottom:10px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"><a href="#" style="color:#414141;">Learn more</a></p>
    </td>
    </tr>
</table>

<br style="clear:both;"/>
</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>

</table>


      </td>
    </tr>
</table>

</body>
</html>