title: CSS divs width become 100% when the float is set to right in IE 8, but works fine in Firefox and Chrome
body: <p>So here is my CSS problem with IE 8.</p>
  
  <p>I have a parent div and 2 child div. I want the parent divs width to be increased based on the width of the inner -child div's. It works well in Firefox, but in IE8, the first child div's width going to the entire page width when I have a <code>float:right</code> for the inner element of that div.</p>
  
  <p>My HTML markup</p>
  
  <pre><code>&lt;div class="divPageContainer"&gt;   
      &lt;div id="pnlOrderOptions" class="pnlOrderOptions"&gt;      
          &lt;div class="divOrderOptions"&gt;      
              some content           
          &lt;/div&gt;    
      &lt;/div&gt;
      &lt;div class="divOrderDetails" id="pnlOrderDetails"&gt;
          &lt;div style="height:20px;width:800px;border:3px solid red;padding:2px;"&gt;this width of this red box can be vary from 100 to 1000&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.divPageContainer  
   { width:auto; 
     float:left; 
     margin-left:8px;
     height:auto;
     border:1px solid black;
   }
   .pnlOrderOptions 
   {
     min-height:10px; 
     height:auto;
     overflow:auto;
     margin-top:30px; 
     border:1px solid orange;
     width:auto;
   }
   .divOrderOptions 
    {
      margin-left:7px; 
      font-family:Verdana;
      font-size:12px; 
      width:400px; min-height:10px;height:auto;
      border:1px solid #858A8D;
      float:right; padding:5px;
      background-color:#F0F6F8;
    }
    .divOrderDetails 
    { 
      float:left; 
      margin-top:4px;padding:3px;
      border:2px solid blue;
      min-height:10px;height:auto;
    }
  </code></pre>
  
  <p>It works well in Firefox; here it is:</p>
  
  <p><img src="https://i.stack.imgur.com/Jw5rg.png" alt="alt text"></p>
  
  <p>And in IE I am getting (I reduced the red bordered divs width to 400 from 800 to get a good snapshot because my monitor is a wide one )</p>
  
  <p><img src="https://i.stack.imgur.com/wFVCK.png" alt="alt text"></p>
  
  <p>One thing I noticed is that this problem came when I deploy this as a intranet web application. It works well in local development machine. I remember some IE7 compatibility problem used to appear when we deploy sites to intranet. </p>
  
  <p>The ultimate result I am looking for is the div with content "somecontent" here should be the right most side (not to the page but based on the width of the second div, which will change dynamically) ie it should behave like my Firefox screenshot.</p>