Float Alternative For Email Clients

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

<table> I use either <table align="right"> or <table style="text-align: right;">

Good luck.

Solution 2:

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;}
.wrapperdiv{outline: 1px solid blue;}
	
@media screen and (max-width: 480px) {
    .wrapper{width:100%!important;}
}

<tablewidth="100%"border="0"cellspacing="0"cellpadding="0"class="wrapper"><tbody><tr><tdvalign="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]--><divstyle="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;"><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tbody><tr><tdstyle="font-size:10px;">left</td></tr></tbody></table></div><!--[if (gte mso 9)|(IE)]></td><td><![endif]--><divstyle="display:inline-block; max-width:340px; min-width:200px; vertical-align:top; width:100%;"><tablewidth="100%"border="0"cellspacing="0"cellpadding="0"><tbody><tr><tdstyle="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

Solution 3:

Here is the trick I come up with.

html

<divclass="l">
  left text
</div><divclass="m"></div><divclass="r">
  rigth text rigth text
</div>

css

.l {
  display: inline-block;
}

.m {
  display: inline-block;
  width: calc(100% - 180px);
}

.r {
  display: inline-block;
}

jsfiddle.

It is straightforward. I need to always have a distance between left and right component as much as possible and it is depicted in the calc property of the fictitious element.

Share