« Le langage CSS/Valeurs et unités » : différence entre les versions
Contenu supprimé Contenu ajouté
→Distances et dimensions : <!> Unité absolue ou relative |
|||
Ligne 126 :
En changeant seulement le type d'unité utilisé pour exprimer la même largeur (60% de 300 pixels = 180 pixels), la colonne 2 se retrouve à la ligne suivante.
Cet effet est du à l'ordre de calcul de la taille des éléments :
* Le conteneur a une largeur de 300 pixels
* Le conteneur A occupe 100% du parent (300 pixels), largeur a priori nécessaire pour le long contenu
* La largeur de la colonne 1 est réduite à 60% de la largeur.
La taille du conteneur A est déterminée selon celle des éléments qu'il contient, tandis que celle de la colonne 1 est déterminée selon celle du conteneur A.
Dans un tel cas de conflit, l'ordre des éléments est pris en compte.
----
La solution est de spécifier la largeur en pourcentage sur l'élément conteneur (conteneur A).
Largeur maximale de la colonne 1 sur l'élément parent en pourcentage : <syntaxhighlight lang="css" inline>max-width:60%;</syntaxhighlight>
<syntaxhighlight lang="html">
| |||