tags:

views:

78

answers:

1

Hello all. How can I get a div width when the div is inside another div with "overflow: hidden;" ?

I tried to set overflow as auto and after using $("#divselector").width() but I always get the parent div width!

Ex:

html:

 <div id="content"> 
            <div id="item">content content content ...</div>
 </div>

css:

#content
{            
    width: 760px;
    height: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    cursor: move;
}

Detail: using IE 6 work, but in IE 8 no...

+2  A: 

By default, div's will expand to the width of their parent.

If you float your items within the div, the item will no longer expand to the width of the parent.

Add the following to your styles:

#item { float: left; }

See how this works: http://jsbin.com/umabe/edit

Mervyn
+1 - This works. As does giving `position:absolute` or `display:inline-block` (for supported browsers). The `div` will expand beyond the size of the parent, and give the correct value.
patrick dw
In unsupported browsers, position: absolute will cause #content to appear in an unexpected position and return the correct value. display:inline-block will cause #content to show but the value to be incorrect. In supported browsers, you'll avoid the trouble often associated with floats.
Mervyn