Cross-browser method for getting width and height of a DIV?

Posted by thinkthank on Stack Overflow See other posts from Stack Overflow or by thinkthank
Published on 2010-02-26T05:34:31Z Indexed on 2010/05/18 19:30 UTC
Read the original article Hit count: 198

This is my first post, so please go easy on me. I'm sure I'm doing everything wrong. However, I couldn't find any posts that answered the question above.

I use jQuery. I'm trying to find a way to get the current width and height of a DIV element, even if they're set to "auto". I've found many ways to do this, but no method returns the same width in IE. It is important that this method is cross-browser, as it will break the layout of the page if different numbers are returned in different browsers.

.width() and .height() do not work because in IE, padding is subtracted (e.g. width() returns 25 where width is 30 and padding is 5).

.outerWidth() and .outerHeight() are not consistent either. While they work IE (believe it or not) in FF, the padding is added again to the full width (e.g. outerWidth() returns 110 in FF where width is 100px and padding is 10px).

Is there any way out of this mess without writing complex browser checks? Thanks!

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery