Comment mettre en forme un bloc en 2 colonnes avec la propriété CSS float ?

Prenons l'exemple d'une boutique en ligne, vous travaillez sur la vue résumée de vos familles ou de vos produits. L'objectif est de retrouver la même mise en page que ce soit pour le bloc de gauche, que pour le bloc de droite.

Dans ce cas, le positionnement en flottant (en CSS "float") est bien adapté. Si vous ne définissez pas de taille fixe sur vos blocs, il se peut que vous ayez un décalage.

En effet suivant la longueur de votre texte, le bloc de gauche .short_product affiche un texte de 300 caractères alors que le bloc droite affiche un texte de 250 caractères, un décalage peut se présenter.

Il faut donc définir une hauteur sur vos blocs pour que le float fonctionne correctement et notamment à plusieurs endroits.

Exemple :

- D'un côté le bloc conteneur :

.short_product {
float:left;
height:250px; /* hauteur fixe pour structurer la colonne de gauche et droite */
margin:5px 20px 5px 10px;
padding:0;
text-align:center;
width:420px;
}

De l'autre côté le bloc qui contient le texte :

.short_product p{
height:80px; /*sans hauteur fixe le bloc varie suivant la longueur du texte */
line-height:14px;
margin:5px 0 0 10px;
text-align:left;
}

Et au besoin, à appliquer sur vos autres blocs. (image, propriétés additionnelles, etc.)