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, 1 year 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!

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098