Get full width of an element when it has absolutely positioned child elements inside it

Question

JS Fiddle: http://jsfiddle.net/meYnS/3/

Lets say I have an element .outer with 100px width and position:relative;. It has an inner element which has position:absolute; and left:95px;. I.e. the child element exceeds the width of the parent element.

Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); it return 100.

But how can I get the full width of the outer element (which is obviously greater than 100, because of the absolutely positioned child element)?

Is there a built-in way or do I have to do a manual calculation (i.e. adding each child width to parent width to figure out the full width)?

Answer 1

You can use the properties scrollWidth, scrollHeight.

If you are using jQuery,

$('.outer').get(0).scrollWidth