Question

So here is my CSS problem with IE 8.

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 float:right for the inner element of that div.

My HTML markup

<div class="divPageContainer">   
    <div id="pnlOrderOptions" class="pnlOrderOptions">      
        <div class="divOrderOptions">      
            some content           
        </div>    
    </div>
    <div class="divOrderDetails" id="pnlOrderDetails">
        <div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
    </div>
</div>

and the CSS

.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;
  }

It works well in Firefox; here it is:

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 )

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.

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.

Answer 1

The float right thing is a known bug in IE and FX 2.

Can you use display:inline-block; instead? There is a way to get it to work on non-inline elements for IE.

EDIT: You’d have to set text-align:right on the parent of the inline-block.

EDIT #2: Here is an example of the fix I was talking about: http://work.arounds.org/sandbox/64/run

Please let me know if this isn’t what you need or if it doesn’t work for you.