float alternative for email clients

Question

What is the float alternative for the email clients?

Here is what I have using float. And I want the alternative approach to preserve the behavior exactly.

html

<div class="container">
  <div class="leftText">
    left text
  </div>
  <div class="rightText">
    right text right text
  </div>
</div>

css

.leftText {
  display: inline-block;
  border: 1px solid green;
  background: yellow;
}

.rightText {
  display: inline-block;
  float: right;
  border: 1px solid green;
  background: cyan;
}

jsfiddle

Here is what I tried to do using available in all email clients text-align and calc (calc is available according to this).

html

<div class="container">
  <div class="leftText">
    left text
  </div>
  <div class="rightText">
    right text right text
  </div>
</div>

css

.leftText {
  display: inline-block;
  border: 1px solid green;
  background: yellow;
}

.rightText {
  display: inline-block;
  text-align: right;
  width: calc(100% - 58px);
  min-width: 122px;

  border: 1px solid green;
  background: cyan;
}

jsfiddle

This approach does not work in a way that when the right text is moved to its own line the words does not wrap due to the min-width being set. If it would be possible to add word wrapping after the right text moved to its own line that solution would be what I seek.

According to this Outlook does not support display: table and after testing it turns out to be true. So, please, do not advise me to use the display: table or similar display (like inline-table, table-row, table-column, table-cell etc.).

Answer 1

As mentioned above, it is possible to use tables to simulate floats. Below is the code using hybrid method of coding. it works the way you want it to.

Note: CSS is just to show you how the stacking would work. Below code can work the same without media queries.

.wrapper{width:680px;outline: 1px solid #f00;}
.wrapper div{outline: 1px solid blue;}
	
@media screen and (max-width: 480px) {
    .wrapper{width:100% !important;}
}

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper">
  <tbody>
    <tr>
      <td valign="top" bgcolor="#FFFFFF" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">
		
		<!--[if (gte mso 9)|(IE)]><table cellspacing="0" cellpadding="0" border="0" width="680" align="center"><tr><td><![endif]--> 
		
		  <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
			  <table width="100%" border="0" cellspacing="0" cellpadding="0">
				  <tbody>
					<tr>
					  <td style="font-size:10px;">left</td>
					</tr>
				  </tbody>
				</table>

		  </div>
		  <!--[if (gte mso 9)|(IE)]></td><td><![endif]--> 
		  
		  <div style="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;">
			  <table width="100%" border="0" cellspacing="0" cellpadding="0">
				  <tbody>
					<tr>
					  <td style="font-size:10px;">right</td>
					</tr>
				  </tbody>
				</table>

		  </div>
		  
		<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--> 
		
	  </td>
    </tr>
  </tbody>
</table>

Hope this is the answer you where looking for.

Cheers