max-width
Définit la largeur maximale d’un élément.
Syntaxe
{ max-width: sMaxWidth }
Valeurs possibles
sMaxWidth
Variante qui spécifie la largeur maximale d’un élément :
length |
Nombre à virgule flottante suivi d’un indicateur d’unités absolues ( cm , mm , in , pt ou pc ) ou d’un indicateur d’unités relatives ( em , ex ou px ). Pour plus d’informations sur les unités de longueur prises en charge, voir Référence des unités de longueur. |
percentage |
Nombre entier suivi d’un signe pourcentage (%) spécifiant un pourcentage de la hauteur du bloc conteneur à utiliser en tant que hauteur maximale de l’élément. Si la hauteur du bloc conteneur n’est pas explicitement définie, la hauteur maximale de l’élément n’est pas limitée et la propriété max-height est considérée comme égale à 0 % . Pour plus d’informations sur les blocs conteneurs et sur le mode de calcul de leur hauteur, voir la spécification Cascading Style Sheets (CSS), Level 2 (CSS2), Revision 1 (CSS2.1) (Feuilles de style en cascade (CSS), Niveau 2 (CSS2), Révision 1 (CSS2.1)) |
La propriété n’a pas de valeur par défaut. Elle n’est pas héritée.
Remarques
Les attributs min-width et max-width s’appliquent aux éléments de niveau de bloc à positionnement flottant et absolu, aux éléments de bloc intraligne et à certains contrôles intrinsèques. Ils ne s’appliquent pas aux éléments inclus non remplacés, comme les colonnes de tableau et les groupes de lignes/colonnes. (Un élément « remplacé » possède des dimensions intrinsèques, comme un élément img ou un élément textarea .)
Cette propriété est activée uniquement sous la balise !DOCTYPE stricte.
Exemple
L’exemple suivant montre comment contraindre la largeur d’un élément DIV à l’aide des attributs min-width et max-width . Il ne peut être visualisé qu’avec Internet Explorer 7 ou version ultérieure :
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN">
<html>
<head><style>
.width {
width:50%;
min-width:200px;
max-width:400px;
background:#eee;
}
.content {
border :1px solid #c00;
padding:5px;
}
</style>
</head>
<body>
<div class="width">
<div class="content">
<h2>{min-width:200px; max-width:400px}</h2>
<p>This div also has a width of 50%. Resize the window
to grow and shrink the div from max to min width.<br/><br/>
The outer div controls the width of the inner "content" div.
Note that the div height increases to accomodate the flow of text.</p>
</div>
</div>
</body>
</html>
Informations relatives aux normes
Cette propriété est définie dans Cascading Style Sheets (CSS), Level 2 (CSS2) (Feuilles de style en cascade (CSS), Niveau 2 (CSS2)) .png "Ee341485.xtlink_newWindow(fr-fr,Expression.40).png")
.
Applicable à
a, abbr, acronym, b, bdo, big, blockquote, body, button, caption, center, cite, code, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, frameset, frame, hn, i, iframe, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, p, q, s, span, sub, table, td, th, tt, u, ul, var, xmp