J'ai besoin d'une propriété CSS max-margin, mais elle n'existe pas. Comment puis-je la simuler ?

Question

J'essaie de créer une page simple avec les caractéristiques suivantes :

1. Son corps doit avoir une largeur d'au moins 60em.
2. Ses marges gauche et droite doivent être de même largeur et au maximum de 3em.
3. Lorsque la fenêtre du navigateur est redimensionnée, les marges du document doivent être redimensionnées de manière à ce que la barre de défilement horizontale de la fenêtre du navigateur couvre la plage la moins étendue possible.

En transformant ces exigences en un problème de programmation linéaire, nous obtenons :

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 */

En résolvant ce programme linéaire, on obtient :

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

(Désolé pour les mathématiques ennuyeuses, mais je ne suis pas sûr que l'explication originale en anglais était suffisamment claire).

---

Revenons maintenant à la page actuelle. Après avoir cherché sur Google ce que je pouvais faire avec CSS, j'ai réussi à mettre en œuvre les deux premières exigences en utilisant le code suivant :

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. */
}

Si le CSS avait un max-margin il serait facile de satisfaire à toutes les exigences :

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

Mais, bien sûr, max-margin n'existe pas. Comment pourrais-je le simuler ?

Answer 1

Divs d'espacement de part et d'autre des divs de contenu. Ce sont vos marges. Définissez leur largeur maximale à l'aide de la propriété max-width.

Answer 2

La réponse de Matthieu est la bonne ici, mais pour développer ce qu'il dit :

<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 3

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

Answer 4

Les divs d'espacement sont une mauvaise pratique. Placez une autre DIV au-dessus de votre DIV sur votre modèle avec text-align:right (si vous voulez maximiser la marge gauche) ou text-align:left si vous voulez maximiser la marge-droite, cela fera l'affaire.

Answer 5

Ver http://www.labite.com/

Redimensionnez la fenêtre pour observer les changements apportés à l'interface utilisateur.

Le site web utilise min-width max-width avec width:100%.

Le cadre noir a une largeur maximale qui est un peu plus large que le conteneur.