CODEWITHSUNDEEP
javascriptjqueryhtmlcsswidth
Edmund Moshammer
Edmund Moshammer

Reputation: 688

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.

http://jsfiddle.net/4syEJ/

Upvotes: 1

Views: 3688

Answers (3)

Ramin Omrani
Ramin Omrani

Reputation: 3761

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

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

http://jsfiddle.net/4syEJ/2/

Upvotes: 1

bob12
bob12

Reputation: 47

Try :

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

And

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

Upvotes: 1

Nick
Nick

Reputation: 5198

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

document.getElementById('outer').scrollWidth

http://jsfiddle.net/4syEJ/3/

Upvotes: 4

Related Questions