div's not stacking horizontally

as instructed in responsive email i made 4 divs of 200px width but they are stacking vertically

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Welcome Mailer - Spoiltproof Retails Pvt. Ltd</title>
    <link rel="shortcut icon" href="http://www.spoiltproof.com/assets/ico/favicon.ico" />    
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />

        <style type="text/css">
        body {margin: 0; padding: 0; min-width: 100%!important;}
        .content {width: 100%; max-width: 600px;}  
                </style>
        <style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style>
    </head>
    <body yahoo bgcolor="#ffffff">
       <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
<![endif]-->

            <table width="100%" class="content" align="center" cellpadding="0" cellspacing="0" border="0" style="border:1px solid #000; max-width:600px;">
                <tr>
                    <td>
                     <!--Logo Table !-->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="auto">
            <img src="images/sp_logo.png" width="100%" height="auto" border="0" alt="" style=" margin:0 auto;" / >
        </td>
    </tr>
   </table>
</td>
                </tr>
                <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
                 <tr>
                  <!--Welcome!-->
    <td align="center" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:34px; padding:0px 10px 0px 10px;">
    <span style="color:#dc143c;">Welcome</span> (username)
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
      <!--Content1!-->
    <td align="center" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:20px; padding:0px 10px 0px 10px;">
    We are so glad to have YOU!!  Thank You for signing-up.      
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
      <!--Content2!-->
    <td align="center" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; padding:0px 10px 0px 10px;">
   Now that you are in and active explore our coolest trends of products which is surely going to set you above and apart from the rest and make people’s heads-turn onto you. So Be Unique & Be Spoiltproof and add a cool fashion statement to your style    
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
      <!--Login Information!-->
    <td align="left" valign="left" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:22px; padding:0px 10px 0px 10px; color:#dc143c;">
                                  Click here to login to your account   
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
    <td align="left" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:left; padding:0px 10px 0px 10px;">
                                Your account credentials are given below:
    </td>
    </tr>
     <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
    <td align="center" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px;">
                <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>  
    <td style="padding:0px 10px 0px 10px;">
    Username:
    </td>
    <td style="color:#dc143c;">
    Dinesh Dumbre
    </td>
    </tr>
    <tr>  
    <td height="10">
    
    </td>
    <td height="10">
    
    </td>
    </tr>
    <tr>  
    <td style="padding:0px 10px 0px 10px;">
    OTP:
    </td>
    <td style="color:#dc143c;">
12345    </td>
    </tr>
    </table>                
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
      <!--Footer!-->
    <td align="left" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:left; padding:0px 10px 0px 10px;">
                               Your registration will help you get a better shopping experience with the following features
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
      <td style="text-align: center; vertical-align: top; font-size: 0;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
            <![endif]-->
            <div style="width: 120px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:center;"> <table border="0" cell-spacing="0" cell-padding="0" width="100%" style="border-collapse:collapse;">
        <tbody>
        <tr>
        <td>
        <img src="images/sp_checkout.png" width="82" height="81" border="0" alt="" style=" margin:0 auto;" / >
        </td>
        </tr>
        <tr>
        <td style="padding-top:10px;">
        FASTER CHECKOUTS
        </td>
        </tr>
        </tbody>
        </table></td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
            <div style="width: 120px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:center;"> <table border="0" cell-spacing="0" cell-padding="0" width="100%" style="border-collapse:collapse;">
        <tbody>
        <tr>
        <td>
        <img src="images/sp_delivery.png" width="120" height="81" border="0" alt="" style=" margin:0 auto;" / >
        </td>
        </tr>
        <tr>
        <td style="padding-top:10px;">
       FREE SHIPPING*
        </td>
        </tr>
        </tbody>
        </table></td>
                    </tr>                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
            <div style="width: 120px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:center;"><table border="0" cell-spacing="0" cell-padding="0" width="100%" style="border-collapse:collapse;">
        <tbody>
        <tr>
        <td>
        <img src="images/sp_returns.png" width="102" height="81" border="0" alt="" style=" margin:0 auto;" / >
        </td>
        </tr>
        <tr>
        <td style="padding-top:10px;">
        EASY RETURNS
        </td>
        </tr>
        </tbody>
        </table></td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
            <div style="width: 120px; display: inline-block; vertical-align: top;">
                <table width="100%">
                    <tr>
                        <td style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:center;"> <table border="0" cell-spacing="0" cell-padding="0" width="100%" style="border-collapse:collapse;">
        <tbody>
        <tr>
        <td>
        <img src="images/sp_tracking.png" width="77" height="81" border="0" alt="" style="margin:0 auto;" / >
        </td>
        </tr>
        <tr>
        <td style="padding-top:10px;">
       TRACING ORDERS
        </td>
        </tr>
        </tbody>
        </table></td>
                    </tr>
                </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td>
            <![endif]-->
        </td>
     </tr>
      <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
    <td align="left" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:left; padding:0px 10px 0px 10px;">
                               Thanking you once again and enjoy a wonderful shopping experience with us.
    </td>
    </tr>
    <tr>
    <td height="10" align="center" valign="middle">
    </td>
    </tr>
     <tr>
    <td align="left" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:left; padding:0px 10px 0px 10px;">
                               Enjoy Shopping,
    </td>
    </tr>
    <tr>
    <td height="20" align="center" valign="middle">
    </td>
    </tr>
     <tr>
    <td align="left" valign="middle" style="font-family: 'Arial', Helvetica, sans-serif !important; font-size:14px; text-align:left; padding:0px 10px 10px 10px; color:#dc143c;">
                             SpoiltProof Team.
    </td>
    </tr>
            </table>
           <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
    </body>
</html>

Please help me with this

wilbertheinen wilbertheinen, 10 months ago

Try removing any kind of spacing between the div's with display: inline-block.

Like this:

</div><!--[if (gte mso 9)|(IE)]></td><td><![endif]--><div style="width: 120px; display: inline-block; vertical-align: top;">


Create a Clang!

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

Get started for free
1-888-533-8098