title: Internet Explorer 6 and 7: floated elements expand to 100% width when they contain a child element floated right. Is there a workaround?
body: <p>I've got a parent <code>div</code> floated left, with two child <code>div</code>s that I need to float right.</p>
  
  <p>The parent <code>div</code> should (if I understand the spec correctly) be as wide as needed to contain the child <code>div</code>s, and this is how it behaves in Firefox et al.</p>
  
  <p>In IE, the parent <code>div</code> expands to 100% width. This seems to be an issue with floated elements that have children floated right. Test page:</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" lang="en" xml:lang="en"&gt;
  
  &lt;head&gt;
  &lt;title&gt;Float test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div style="border-top:solid 10px #0c0;float:left;"&gt;
      &lt;div style="border-top:solid 10px #00c;float:right;"&gt;Tester 1&lt;/div&gt;
      &lt;div style="border-top:solid 10px #c0c;float:right;"&gt;Tester 2&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Unfortunately I can't fix the width of the child <code>div</code>s, so I can't set a fixed width on the parent.</p>
  
  <p>Is there a CSS-only workaround to make the parent <code>div</code> as wide as the child <code>div</code>s?</p>