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 enitire 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 is it
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 compatability 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
Any thoughts ? Thanks in advance