Largest possible margin value in CSS?

Question

I'm using a CSS trick involving setting "margin-bottom" and "padding-bottom" to very large values in order to extend a sidebar to the footer. I'm encountering a situation where the margin value that I was previously using is turning out to be insufficient.

Is there an upper limit to the value that you can assign to the margin property in CSS? Will using really large values have any impact on rendering efficiency/speed or browser stability? Thanks.

EDIT: here is a distillation of the approach that I was describing: Holy grail layout with 100% height

yes it impacts if you use `-99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999em;`, and would you do that? just use assumption layout height....... — Bhojendra Rauniyar, Jan 24 '15 at 23:16
It sounds like you're going down a bad path; instead, what type of layout are you desiring to achieve? Perhaps we can help you in doing so without *bending rules* or *pushing limits* :) — Sampson, Jan 24 '15 at 23:19
You can use flexbox instead, with your current code as a graceful degradation for people with old browsers. If on some edge cases the graceful degradation is not perfect, it's user's fault for having an old browser. — Oriol, Jan 24 '15 at 23:22
@JonathanSampson - yes, I was initially iffy about this approach, but it has worked reasonably well, aside from this marginal case I've just run into. In principle I agree with you, but many people seem to be using this solution successfully and without issues. It's basically the approach described here: https://stackoverflow.com/questions/4515251/holy-grail-layout-with-100-height#answer-4515564 — Spokes, Jan 24 '15 at 23:26
@Oriol - I'm unfamiliar with flexbox. Thanks, I will take a look at it. — Spokes, Jan 24 '15 at 23:28
@Spokes CSS tables can be another alternative, with much more support than flexbox, but not supported by IE7. — Oriol, Jan 24 '15 at 23:32
Related: [Maximum value for CSS position](http://stackoverflow.com/q/26637545/1529630). In that thread I tested `margin-left` and `left` instead of `margin-bottom` and `padding-bottom`. But you can reuse the code. — Oriol, Jan 24 '15 at 23:39
@Spokes Don't follow others into danger - do things the right way. I work on the Internet Explorer team, and see far too many sites break people were *clever* rather than *careful*. For your own sake, find a better way :) — Sampson, Jan 24 '15 at 23:41
@JonathanSampson Thanks, Jonathan; I'm indeed leaning towards taking another approach to the sidebar issue. But I'm curious - what are the specific qualms you have about the approach in question? — Spokes, Jan 25 '15 at 00:20
@Spokes Anytime you're using a feature for something other than what it was designed to do, you're stepping onto a path of unreliability. Future work on/around the code-base responsible for layout or composition could unexpectedly change the way your site works in the future. This happens all the time with Internet Explorer - people do things that they aren't supposed to do, and when Internet Explorer explodes, they get upset and blame the browser :) — Sampson, Jan 25 '15 at 00:43

score 1 · Answer 1 · answered Jan 24 '15 at 23:26

I suspect that most browsers respect the value ranges typically found for integers and floating numbers as you might see in languages like C/C++/C# and Java and JavaScript.

Also, these ranges will vary if you are on a 32-bit versus 64-bit architecture.

In short, there are limits, I am not sure exactly what they are.

score 0 · Answer 2 · answered Sep 12 '16 at 00:14

My recommendation would be to look at current monitor resolutions and set your value greater than the typical monitor resolution that you expect your users to have. For instance, lets say you don't expect to have users with monitors greater than 4K UHD. The resolution of 4K UHD is 3840 × 2160 pixels. You could use 4000px as your upper bound.

Also for Consideration:

W3C standard seems mute on this point.
I've also noticed that some browsers can freeze if the value is too high. A padding (not margin) value of 99999999px sometimes locked chrome in one of my tests.
It is also possible to use units of centimeter (cm)

margin: 100000000cm; \\ 1,000 km of margin in all directions.

That would require a huge monitor.
Something also worth considering is that floats are valid inputs e.g. margin: 1.999rem.

Largest possible margin value in CSS?

2 Answers2