DIV offsetWidth/Width/innerWidth returns zero in IE8 when window resizing

Question

i have so many elements in my page. Please conside below DIV

    <div id="root">    
        ..................
    <div id="child1">
        .............
    </div>
    <div id="child2">
        ...............
    </div>
</div>

The root div(#root) has some width based on the content when gets loaded.

when ever window gets re-sized repaint() function is called which is present in window resize function

$(window).resize( function () {
    repaint();
});
function repaint(){
    //width returns "0" in IE8 browser and other browsers working fine
    var width=$("#root").width() || $("#root").innerWidth() -> returns zero value in IE8
}

it returns width as "0" in IE8 browser but returns some width (960px) in IE9 /other modern browsers.

i don't know what is the exact cause for this issue.

why it returns zero width when window gets resized.

Thanks,

Siva

Answer 1

http://jsfiddle.net/5LFXK/

This works in IE8. See the console (the layout is f***ed up).

$(window).resize( function () {
  repaint();
});
function repaint(){
//width returns "0" in IE8 browser and other browsers working fine
var width=$("#root").width();
console.log(width);

}