I need a max-margin CSS property, but it doesn't exist. How could I fake it?

Question

I am trying to make a simple page with the following characteristics:

1. Its body must be at least 60em wide.
2. Its left and right margins must be equally wide and at most 3em wide.
3. When the browser window is resized, the document's margins should be resized so that the browser window's horizontal scrollbar covers the least wide possible range.

Transforming these requirements into a linear programming problem, we get:

DEFINITIONS: BRWS = (width of the browser window, not a variable) BODY = (width of the document's body) LRMG = (width of the document's left and right margins) HSCR = (range of the browser window's horizontal scroll bar)  OBJECTIVE: MIN HSCR   /* Third requirement */  CONSTRAINTS: HSCR = BODY + 2*LRMG - BRWS  /* From the definition of how a browser's                               * horizontal scrollbar works. */ BODY >= 60  /* First requirement */ LRMG <= 3   /* Second requirement */ LRMG >= 0   /* Physical constraint, margins cannot be negative */ HSCR >= 0   /* Physical constraint, scroll bars cannot have negative ranges */ 

Solving this linear program, we get:

BODY = (BRWS <= 66) ? 60 : (BRWS - 6) HSCR = (BRWS >= 60) ?  0 : (60 - BRWS) LRMG = (BRWS + HSCR - BODY) / 2 

(Sorry for the boring math, but I am not confident that the original explanation in English was clear enough.)

---

Now back to the actual page. After googling to find what I could do with CSS, I managed to implement the first two requirements using the following code:

body {   min-width: 60em; /* First requirement */ }  /* The document's body has only two children, both of which are divs. */ body > div {   margin: 0 3em;    /* Second requirement, but in a way that makes */   max-width: 100%;  /* it impossible to satisfy the third one. */ } 

If CSS had a max-margin property, satisfying all requirements would be easy:

body > div {   max-margin: 0 3em;   max-width: 100%; } 

But, of course, max-margin does not exist. How could I fake it?

Answer 1

Spacer divs on either side of the content divs. Those are your margins. Set their max width using the max-width property.

Answer 2

To mimic a variable-width left margin:

.div-class {     display: inline-block; } .div-class:before {     content: '';     width: 10%;     min-width: 100px;     max-width: 200px;     display: inline-block; }