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

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

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

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.

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