Element dimensions

All HTML elements have six property pairs that allow you to read out their dimensions. This page tests and explains these property pairs.

Experiment

The experiments that have lead to the compatibility table below are all done on this element.

This is the test DIV.
It has these styles: 
width: 200px;
height: 200px;
border: 10px solid #AF0078;
padding: 10px;
overflow: auto;
Its total visible width and height are therefore 240 pixels (200 width + 20 padding + 20 border).

This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
This is the test DIV.
Show:
clientLeft clientTop clientWidth clientHeight offsetWidth offsetHeight offsetLeft offsetTop offsetParent scrollWidth scrollHeight scrollLeft scrollTop

Compatibility

Property pair Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.7.12 Safari 1.3.2 Opera 8 iCab 3.0
clientLeft and clientTop
The width of the border 		Yes Yes Buggy No No Yes Yes
x.clientLeft and x.clientTop

In Explorer Mac these properties give weird values.
clientWidth and clientHeight
The CSS width/height plus the CSS padding minus the scrollbar width
Scrollbar width is 15px, except in IE Windows, where it is 16px 		Yes Yes Incorrect Yes Yes Yes Incorrect
x.clientWidth and x.clientHeight

In Explorer Mac these properties give the value of CSS width/height.

iCab doesn't count the scrollbars
offsetLeft and offsetTop
The left and top position of the element relative to its offsetParent.
See the Find Position page for more information 		Yes Yes Buggy Yes Yes Yes Yes
x.offsetLeft and x.offsetTop

In Explorer Mac offsetLeft gives a weird value.
offsetWidth and offsetHeight
The CSS width/height plus the CSS padding plus the border width 		Yes Yes Yes Yes Yes Yes Yes
x.offsetWidth and x.offsetHeight
scrollLeft and scrollTop
The amount of pixels the element has scrolled. Read/write. 		Yes Yes Incomplete Yes Yes Yes Yes
x.scrollLeft and x.scrollTop
x.scrollTop = 20

Read-only in Explorer Mac.
scrollWidth and scrollHeight
The clientWidth and clientHeight the element would have had if it had overflow: visible; width: auto; height: auto
If the content fits the box (ie. no scrollbars are necessary), it is equal to clientWidth and clientHeight. 		Almost Almost Almost Yes Yes Almost Yes
x.scrollWidth and x.scrollHeight
Becomes unreliable if the content is smaller than the box.

If the content is smaller than the box, Explorer Windows makes the scrollHeight, but not the scrollWidth, equal to the actual height of the content (ie. smaller than the box's clientHeight).

If the content is smaller than the box, Explorer Mac makes the scrollWidth and the scrollHeight equal to the actual width and height of the content (ie. smaller than the box's clientWidth and clientHeight).

If the content is smaller than the box, Opera makes the scrollWidth 0 and the scrollHeight equal to the CSS height.