title: I need a max-margin CSS property, but it doesn't exist. How could I fake it?
body: <p>I am trying to make a simple page with the following characteristics:</p>
  
  <ol>
  <li>Its body must be at least 60em wide.</li>
  <li>Its left and right margins must be equally wide and at most 3em wide.</li>
  <li>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.</li>
  </ol>
  
  <p>Transforming these requirements into a linear programming problem, we get:</p>
  
  <pre><code>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 &gt;= 60  /* First requirement */
  LRMG &lt;= 3   /* Second requirement */
  LRMG &gt;= 0   /* Physical constraint, margins cannot be negative */
  HSCR &gt;= 0   /* Physical constraint, scroll bars cannot have negative ranges */
  </code></pre>
  
  <p>Solving this linear program, we get:</p>
  
  <pre><code>BODY = (BRWS &lt;= 66) ? 60 : (BRWS - 6)
  HSCR = (BRWS &gt;= 60) ?  0 : (60 - BRWS)
  LRMG = (BRWS + HSCR - BODY) / 2
  </code></pre>
  
  <p>(Sorry for the boring math, but I am not confident that the original explanation in English was clear enough.)</p>
  
  <hr>
  
  <p>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:</p>
  
  <pre><code>body {
    min-width: 60em; /* First requirement */
  }
  
  /* The document's body has only two children, both of which are divs. */
  body &gt; div {
    margin: 0 3em;    /* Second requirement, but in a way that makes */
    max-width: 100%;  /* it impossible to satisfy the third one. */
  }
  </code></pre>
  
  <p>If CSS had a <code>max-margin</code> property, satisfying all requirements would be easy:</p>
  
  <pre><code>body &gt; div {
    max-margin: 0 3em;
    max-width: 100%;
  }
  </code></pre>
  
  <p>But, of course, <code>max-margin</code> does not exist. How could I fake it?</p>