Question

I want to have a div to have an initial width equal to a min-width say 800px and expand in width as elements inside grow in width. I did a <div style="min-width: 800px".. /> but in IE the div starts with a width less than 800px, sum of widths of inner elements.

How can this be done for IE? I can’t use width:800px because elements inside can’t expand beyond 800px.
I use jQuery.

Addition:

I am using IE8. I just created a new page with an outer div with just min-width and inner div with a width. The outer width used the whole screen width. Not same issue but related. I will have to find out why my page behaves differently.

Answer 1

How about using CSS expressions:

div {    
    display: inline-block;
    width: inherit;  

    /* min-width for good browsers */
    min-width: 800px; 

    /* CSS expression for older IE */
    width: expression(document.body.clientWidth < 800? "800px": "auto");    
}

Example here: min-width CSS expression hack. The yellow background is the outer div
the dotted line is the inner element so the div keeps size properties of it’s child 🙂