Place tables next to each other without using 'float'

Question

I am trying to find out a solution of adding tables next to each other without using 'float:left;'. I am using the code for an email template and 'float' doesn't work on Outlook and some other email clients.

I have tried everything I could think of, searched the forum and all over the web but I am unable to find a solution.

Here's the code I am using:

<table width="155" height="155" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="main-content" style="float:left;margin-bottom:20px;">
  <tbody>
      <tr>         
         <td><img style="border:0;" align="none" height="113" width="166" src="<?php echo $post_thumbnail ?>"  /></td>
         <td bgcolor="#f4f4f4" width="35" style="color:#f4f4f4;">T</td>
      </tr>
      <tr>        
     <td style="font-family:arial;font-size:13px;font-weight:bold !important;line-height:17px;padding:10px 10px 0;"><strong>Text</strong></td>
     <td bgcolor="#f4f4f4" width="35" style="color:#f4f4f4;">T</td>
      </tr>

      <tr>        
    <td width="155" style="color: #666;font-size:13px;padding:0 10px 15px;">  
        <a style="background-color:#ac0003; color:#ffffff; border:1px solid #660b0e;cursor: pointer; display: block; font-family:Arial, Helvetica, sans-serif; font-size:12px; margin: 0 auto;margin-top:10px;padding: 2px 11px;;text-decoration:none;color:#ffffff; font-weight:bold;text-align:center;text-decoration:none;" href="<?php echo $post->guid ?>">Text</a>
     </td>
     <td bgcolor="#f4f4f4" width="35" style="color:#f4f4f4;">T</td>
      </tr>


      </tbody>

</table>

Help!

Hey, First result in a search, is that helpful? http://stackoverflow.com/questions/15367542/in-outlook-html-email-float-does-not-work — Ronni Skansing, Feb 17 '14 at 02:29
Thanks @RonniSkansing! I have already gone through the guides from MailChimp, Campaign Monitor, etc, but they don't have something specific written to give me a solution. — kat_indo, Feb 17 '14 at 02:33
http://www.email-standards.org/ it does not give another solutions either, but a good place to check what specific vendors are able to. — Ronni Skansing, Feb 17 '14 at 02:36

score 1 · Answer 1 · answered Feb 17 '14 at 02:34

1

You can try giving the table elements a display of inline. They should then line up next to each other.

answered Feb 17 '14 at 02:34

Gray Spectrum

723
2
7
21

Some tips on that here http://stackoverflow.com/questions/7457319/how-do-i-make-an-html-table-inline – Matthew Lock Feb 17 '14 at 02:36
That still doesn't fix the problem on Outlook. – kat_indo Feb 17 '14 at 02:42
kat_indo, i highly recommend giving this article a quick read. it should help clear up any confusion you're encountering with outlook. Link: http://www.sitepoint.com/code-html-email-newsletters-2/ – Gray Spectrum Feb 17 '14 at 02:47
Thanks @GraySpectrum. I have already read too many guidelines but none of them provides a solution. – kat_indo Feb 17 '14 at 03:16
What version of outlook are you using? – Gray Spectrum Feb 17 '14 at 03:44

score 0 · Answer 2 · answered Feb 17 '14 at 02:36

0

User display: inline-block; instead of float:left;

answered Feb 17 '14 at 02:36

Jagadeesh

1
1
1
2

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

For html email you should be using align="left" instead.

Here is an example

edited May 23 '17 at 10:25

Community

1
1

answered Feb 17 '14 at 03:55

John

11,985
3
45
60

Place tables next to each other without using 'float'

3 Answers3