What's the maximum pixel value of CSS width and height properties?

Question

What are the largest valid px values that CSS width and height properties accept?

(I'm currently building a webapp that creates a very large zoomable container element and I want to know what are the actual limits.)

Lawyer

Its dependent upon the UA - there is no single value to go by – Deflect

@Deflect Please elaborate. – Lawyer

"CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions." - Section 4 in the Values and Units Module - So you'd have to figure it out for each browser. – Deflect

Answer 1

Using the CSS inspector that comes with certain browsers on an element with 10000000000px width and height:

Firefox: 33554400px
Chrome:  33554428px
Opera:   33554428px
IE 9:    21474836.47px

Commonage

IE7 says.... 134217727px <- No, I didn't miss the decimal. Tested these using jsfiddle.net/SQ7Lz – Moralez

MS Edge reports 10737418.23px – Michelemichelina

Unfortunately you can't trust CSS inspectors. For example in IE11, if you set something to have a height of 6 million pixels the inspector will report it as -184070.03px; but with javascript you can see that it is 1533916.875px. This is the maximum height you can set via css in both IE11 and Edge. What @Moralez has shown is that you can make elements larger than that limit putting elements inside them. I've been looking at this issue recently: jsfiddle.net/JoolsCaesar/aczx25u4/8 – Dobbins

Also, IE11 and Edge completely fail to parse the CSS (10000000000px ) in @JamesDonnelly's jsfiddle, so they just have a height of 18px. Not only that there are strange and conflicting limits for all kinds of values, for example the scrollHeight that IE can report is much lower than what it can have, so you have scrollTop, much larger than your scrollHeight (Can be seen in that fiddle ^). – Dobbins