How to Retrieve the Width of a Div Element in Jquery with Overflow Hidden

Question

Is there a way to determine the width of a div that is inside another div with "overflow: hidden;"?

I attempted setting overflow to auto and then using $("#divselector").width(), but it seems to always provide the width of the parent div!

For example:

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

Note: It works in IE 6, but not in IE 8...

Answer 1

Answer №1

Typically, div elements will automatically adjust their width to fit their parent element.

However, when you float the items inside a div, they will no longer expand to fill the parent's width.

To address this, include the following style rules:

#item { float: left; }

To see how this rule functions, visit: http://jsbin.com/umabe/edit

Answer 2

Typically, div elements will automatically adjust their width to fit their parent element.

However, when you float the items inside a div, they will no longer expand to fill the parent's width.

To address this, include the following style rules:

#item { float: left; }

To see how this rule functions, visit: http://jsbin.com/umabe/edit