title: Wrong font size when using float right in CSS on Mobile Safari
body: <p>I'm having trouble with a simple CSS-Layout. It works on desktop browsers but not on iPhone's Mobile Safari. Using style="float:right" seems to conflict with automatic font size adjustments made by Mobile Safari. The following code works fine on the desktop but on the iPhone "Left" and "Following text" are much larger than "Right":</p>
  
  <pre><code>Left&lt;span style="float:right"&gt;Right&lt;/span&gt;
  &lt;p&gt;Following text&lt;/p&gt;
  </code></pre>
  
  <p>It seems like Mobile Safari's auto-resizing isn't touching the floated word, only the others. As stated <a href="https://stackoverflow.com/questions/5303263/fix-font-size-issue-on-mobile-safari-iphone-where-text-is-rendered-inconsisten"><strong>here</strong></a>, I could add <code>-webkit-text-size-adjust: 100%</code> like so:</p>
  
  <pre><code>&lt;body style="-webkit-text-size-adjust: 100%"&gt;
      Left&lt;span style="float:right"&gt;Right&lt;/span&gt;
      &lt;p&gt;Following text&lt;/p&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>but I would like to preserve Mobile Safari's smarts regarding font size and readability. And I am trying to avoid writing special layouts for different screen sizes.</p>
  
  <p>So is there a more iOS-friendly way to left- and right-align words in the same line of text?</p>