title: HTML Email Signature - Images moving to line below
body: <p>I'm very new to HTML and have been trying to build a HTML signature, I've managed to get it to work in a number of email clients and look how I want but sometimes, for instance on iPhone and in Hotmail/Outlook the social media icons in the second cell move below the company logo. Is there something I have missed or can improve upon so that they stay inline with the rest of the signature?</p>
  
  <p>Below is the current code - I probably have things in the code that either don't need to be there or seem a bit strange but this is best I've managed to achieve. </p>
  
  <pre><code>    &lt;div id="sig" style="min-width: 400px; min-height: 130px; max-width: 600px; max-height: 150px; padding: 5px 0 0 5px;"&gt;
    &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;
    &lt;img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Signature-for-forum.jpg"alt=" width="500" height="119" alt="Lozi Designs" style="float: left; border: none;"/&gt;&lt;/td&gt;        
    &lt;td valign="bottom"&gt;&lt;a href="http://www.facebook.com/lozidesigns"&gt; &lt;img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/FB-LBS.jpg" alt="www.facbeook.com/lozidesigns" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;"&gt;
  &lt;a href="http://www.instagram.com/lozi_designs"&gt; &lt;img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Instagram-LBS.jpg" alt="www.instagram.com/lozi_designs" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;"&gt;
  &lt;a href="http://www.lozidesigns.com"&gt; &lt;img src="http://www.lozidesigns.com/wp-content/uploads/2015/09/Home-LBS.jpg" alt="www.lozidesigns.com" width="38" height="38" style="margin: 0; border: 0; padding: 1.5; display: block;"&gt;    
  &lt;/td&gt;
  &lt;div style="clear:both"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Many thanks</p>