Question

I have two images I am trying to put inside a mailer three rules ::

  1. I must use a table for layout
  2. I must use inline style
  3. No JavaScript allowed

Here is the problem. I want one image to float left and the other image to stay where it is (please see JSFiddle).

I tried adding padding to the td tag on the left but it pushes the image on right out of place. How can I make it so that the "contrasto" image is to the left side of the cell as opposed to the right?

<table>
   <tr>
      <td>
         <img height="50" src="http://www.reduxpictures.com/newsletter/stock_oct13/Contrasto.png" style="padding: 0 200px 0 0" width="174"/>
      </td>
      <td>
         <img class="logo" height="50" src="http://www.reduxpictures.com/newsletter/stock_oct13/Luz.png" width="174"/>
      </td>
   </tr>
</table>
Was it helpful?

Solution

I have updated the JSFiddle, I hope this is what you need http://jsfiddle.net/bDBcD/3/

Made the following changes, made table width 100% and text-align:left for td.

<table width="100%">
  <tr>
     <td><img height="50" src="http://www.reduxpictures.com/newsletter/stock_oct13/Contrasto.png" style="padding: 0 0 0 0" width="174"/></td>
     <td style="text-align:left;"><img class="logo" height="50" src="http://www.reduxpictures.com/newsletter/stock_oct13/Luz.png" width="174"/></td>
  </tr>
</table>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top