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;
}

Answer 3

For pure CSS that works in any scenario:

1. use @media to create a break point.
2. Set a max-width rule below a certain size using responsive width measurements such as an em or % and over that size use static widths such as px.

You'll just need to do the math to figure out the static sizes at the break point to make sure it scales fluidly.

Sample Code:

.my_class {
   margin: 0px 10%;
} 
@media screen and (min-width: 480px) {
   .my_class { 
      margin: 0px 10px;
   } 
}

This will make .my_class follow both:

• The margin: 0px 10%; at over a screen width of 480px
• The margin: 0px 10px; at under 480px.

Answer 4

Matthew's answer is the correct one here, but to expand on what he's saying:

<div id="left"></div>
<div id="content">Content goes here</div>
<div id="right"></div>
<!-- probably need a cleanup div to fix floats here -->

CSS:

#left, #right {
    float: left;
    max-width: 3em;
}

#content {
    min-width: 60em;
}

Answer 5

For anyone coming to this post in 2021. I would like to point you to the answer given in this post: Can we define min-margin and max-margin, max-padding and min-padding in css?.

TLDR: Use css math function min

Answer 6

None of the answers worked for me 100%.

Best way is to use CSS table and table-cell. Supported by all browsers (even IE 8). This handles wrapping way better than float or inline-block solutions, when the page is too narrow.

CSS

.wrapper {
    display: table;
    position: relative;
    width: 100%;
}

.wrapper:before {
    content: '';
    display: table-cell;
    min-width: 100px;
    width: 25%;
    max-width: 300px;
}

.wrapper > .content {
    display: table-cell;
    width: 100%;
}

HTML

<div class="wrapper>
    <div class="content>
        <!-- content here -->
    </div>
</div>

Answer 7

Easy as that

margin-left: min(30%, 150px);
margin-right: min(30%, 150px);

.margin-flat {
  margin-left: 150px;
  margin-right: 150px;
  background: #F6D55C;
}

.margin-max {
  margin-left: min(30%, 150px);
  margin-right: min(30%, 150px);
  background: #3CAEA3;
}

.margin-variable {
  margin-left: 30%;
  margin-right: 30%;
  background: #ED553B;
}

.inner {
  height: 100%;
}

.outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

<div class="outer">
  <div class="inner margin-variable">margin: 30%</div>
  <div class="inner margin-max">margin: 30%<br/>max-margin: 150px</div>
  <div class="inner margin-flat">margin: 150px</div>
</div>

Answer 8

body {
    margin-left: auto;
    margin-right: auto;
    width: 60em;
}

Answer 9

Spacer divs are bad practice. Setup another DIV on top of your DIV on your template with text-align:right (if you want to maximize the margin-left) or text-align:left if you want to maximize the margin-right, this will do the job.

Answer 10

I've seen some very appealing solutions alreaady, but here's a solution that require's relatively little code:

Place the contents of the body in a div inside it, and use display: flex; justify-content: space-around;

body {
    display: flex;
    justify-content: space-around;
}

div {
    margin: 3em;
    width: 100%;
    min-width: 60em;
    background-color: gray;
}

<body>
<div>
... contents of the page ...
</div>
</body>

The gray background is only to visualize the resulting body.

Answer 11

See http://www.labite.com/

Re-size the window to observe the changes to the ui.

The website uses min-width max-width with width:100%

The black frame has max-width which is little wider then the container.