title: margin auto + float right not working in IE7
body: <p>I have a problem in HTML, when rendering in IE7.<br>
  When combining a "margin:auto" block along with a "float:right" block.</p>
  
  <p>This is a sample code for this issue:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="floating" style="float: right; background-color: #ccf"&gt;
  This is the top right links block
  &lt;/div&gt;
  &lt;div id="body" style="width: 800px; margin: auto; background-color: #fcc"&gt;
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  This is the body.
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Problem with this code in IE7:</p>
  
  <ul>
  <li>the margin:auto is not centering the block "body". It looks like the block "floating" is somehow affecting the centering </li>
  </ul>
  
  <p>what I get in IE7:</p>
  
  <p><img src="https://i.stack.imgur.com/L4oRP.png" alt="div &quot;body&quot; is not centered"></p>
  
  <p>The correct display will be (div "body" centered):</p>
  
  <p><img src="https://i.stack.imgur.com/HIk4h.png" alt="div &quot;body&quot; correctly centered"></p>
  
  <ul>
  <li>the "floating" block is not actually floating over the body, when collapsing</li>
  </ul>
  
  <p>what I get in IE7:</p>
  
  <p><img src="https://i.stack.imgur.com/mdv3h.png" alt="div &quot;floating&quot; do not float"></p>
  
  <p>correct display:</p>
  
  <p><img src="https://i.stack.imgur.com/UnnVC.png" alt="div &quot;floating&quot; correctly floating"></p>
  
  <p>Has anyone run into this kind of problem?<br/>
  Any hint to get this right on IE7?<br/>
  <br />
  Thank you</p>