Quand on utilise l’attribut float:left; dans une division (<div>), il arrive souvent qu’on ne puisse pas dimensionner la hauteur du conteneur.
Cela produit ceci :
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoN1IDNugNOxooXj1LC3ZuffgVT6gezu16XfAJjNbH6TUWwQyP1cqQ8Uls1dhMzvxcDOFf5t4lZuFsneYv6iQZM5cLLifbpnp3sBwCFyFqwXSMc75JFA0z82MWpU66_S3eDJPE81LwIfE7ErwV4CA88zeM83Jkg6gazEefDh0vsjkJdhOIYrpbNrlenQ/w640-h250/Capture%20d%E2%80%99e%CC%81cran%202023-06-04%20a%CC%80%2011.20.49.png)
La division Voir tous les événements chevauche la division précédente qui contient des divisions avec l’attribut float:left;
Pour obtenir un écart entre les deux divisions, il est nécessaire d’ajouter dans la première division l’attribut overflow:auto;
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkNNeBxUtjB70K-75wnsOTLtaaJ37e4Z3dN_DToj_sj7lp8x2G9mKdwOTaOJU1AzIpB4PKf5VGPQYhi-6W7raoxsgIFV4ubtfZLnVnvVhyo6h3iTqw8DozaGkp_8hKzvChgBvGdll6jf8kfjSjhguxaGtnCy7COJTY5Q-BXQz60PxBbibl-Vu8q7mCNw/w640-h274/Capture%20d%E2%80%99e%CC%81cran%202023-06-04%20a%CC%80%2011.21.09.png)
Exemple de code HTML :
<div style= »position:relative;…;overflow:auto;« >
<div style= »float:left; … »></div>
<div style= »float:left; … »></div>
<div style= »float:left; … »></div>
…
</div>
<div style= »position:relative;… »>
Voir tous les événements
</div>
Laisser un commentaire