How to get the overflowed width of an element in a webpage

Question

I have two divs like so

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

I'm dynamically updating the content of child and scrolling it using jQuery. I would like to be able to find how wide the child is so I know when to stop scrolling. The problem is that the child's actual width once the overflowed content is present, is wider than even the screen (seems to be about 2500 pixels with the current test content). The border of the element, if its set, does not extend to the actual width of the content, the text overflows beyond the visible border.

Using jQuerys $('#child').width , the clientWidth, scrollWidth (thanks bobince) and offsetWidth properties all max out at 1024px (which is the width of my monitor). Does any one know of any way to find out how wide the elements content is including the overflow? If it helps, The app I am building will run in a kiosk type environment, so a Firefox only (even a nightly version) solution is fine.

Update: scrollWidth on the parent works, I should have read more carefully, thank you again bobince.

Answer 1

document.getElementById('parent').scrollWidth

scrollWidth is an IE extension that historically was less well supported than offsetWidth. However nowadays all the modern desktop browsers include it.

Answer 2

Using JQuery, you can do:

$('#parent')[0].scrollWidth