How I did What

Use class='hide' (css - display: none !important ;) to hide a table, table row, image or any element where it is not required. Keep maximum width of tables to 610px Use transparent .gif images to keep the gaps between elements (eg: tables) You can cheat by putting a different width to an images against actual (eg: width=195 for images of actual width 300px) To have two horizontal blocks , create two tables of width 300px inside a table of width 610. First nested table must aligh left and second nested table must align right. If mobile only element (especially image) is not visible in MS Outlook, keep that element inside the following code: <!--[if !mso]><!--> <!--<![endif]--> To have three horizontal blocks , Create three separate tables inside a table of width 610. First table with width 195 should align left. It should have a right column to accommodate a spacer image of width 12px. Second tabke width 195 should align left. Third ...

body { -webkit-text-size-adjust: none; -ms-text-size-adjust: 100%; } table { border-spacing: 0; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } table td { border-collapse: collapse; } .desktophide { display: none !important; } .gmailfix { display: block !important; height: auto !important; max-height: 450px!important; overflow: visible !important; } * img[tabindex="0"] + div { display: none !important; a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }  @media only screen and (max-width: 480px) { body .hide { display: none !important; } body .sizelimiter { width: 100% !important; max-width: 300px !important; display: block !important; } body .fullwidthimg { height: 49% !important; } body .desktophide { display: b...