Div width limit?

Question

I know this question may be a bit strange, but I just don't know and can't find any information (soo maybe problem doesn't exist) and I build page where div width is dependent on the user. Is there some div width limit? Can div be for example:

width:1000000px?

Answer 1

In both Chrome and Firefox there appears to be a limit due to the way the browsers process width and height through css. I found this post about it, after using the inspect element in both Chrome and Firefox' debugging tools.

Contrary to the post, I found maximum values of 17895698 for Firefox, and 33554428 for Chrome.

Here are also a couple "bug" reports on Bugzilla about people running into the same issue: Report 1 Report 2.

As they say in one (for Gecko/Firefox engines),

CSS lengths in Gecko are limited to at most (1<<30)-1 app units, with 1<<30 treated as an infinite value. App units are 1/60 of a CSS pixel. Lengths larger than that effectively overflow the integer datatype used to store lengths.

((1<<30)-1)/60 == 17895697

which is the maximum CSS length, in CSS px, that we support, effectively.

Answer 2

Based on this SO question, it would seem to be that the only constraint is the available memory of your computer. So, a div which with a width:1000000px would be possible, as would almost any other width.

At large enough width's one could foresee the browser becoming increasingly slow.

Thankfully, this is not a typical concern of most web sites...

JSFiddle here. Enjoy scrolling.

Answer 3

There's no limit per se, but once you start using large sizes SOME browsers have been known to render very slowly. You will want to test that if you use this approach. Also, you're likely to see some browser problems with really high numbers. You might want to stick with numbers between 10-20k.