jquery - Javascript: Getting the width of child-elements

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

I have two stacked divs.

The outer div has a fixed width with overflow hidden.

The inner div has content that in total can be larger than the outher div.

How can I get the total width of the content of the inner div?

<div id='outer' style='width:100px'>
    <div id='inner'>
        content
    </div>
</div>

When I try $('#inner').width() and the content is larger than outer, it will return the width of the outer div.

I am using Chrome.

http://jsfiddle/4syEJ/

Share Improve this question asked Feb 10, 2013 at 17:31 Edmund Moshammer 6888 silver badges19 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You can get the .scrollWidth of the parent, which will return what you want.

document.getElementById('outer').scrollWidth

http://jsfiddle/4syEJ/3/

Try :

<div id="outer" style="width:100px">
    <div id="inner">
        <p id="content">content</p>
    </div>
</div>

And

$('#content').width();

you can use .children() jquery selector like this:

$('#info').html($('#box1').children().width(); 
$('#box2').children().width(); 
$('#box3').width());

http://jsfiddle/4syEJ/2/