Pas d'affichage de couleur de fond...

Bonjour à tous,
Je reviens vers vous, car j'ai un souci d'affichage de couleur.
J'ai une page qui contient trois colonnes (un div par colonne, '.colonne-bloc'), ces trois colonnes sont dans un div englobant (avec une couleur de fond, '.3-colonnes-bloc'). Ma couleur s'affiche correctement dans Dreamweaver mais pas dans Firefox et autres... Je vous joint une image pour présenter le problème.
On voit la trame de fond entre les colonnes (Espace indiqué en rouge sur l'image).
Merci.

.3-colonnes-bloc {
	background-color: #fff;
	width: 1026px;
	overflow: auto;
	float:left;
}
.colonne-bloc {
	float: left;
	width: 332px;
	margin-bottom: 20px;
}

Modifié par luxojr (22 Jun 2020 - 15:55)

Salut,

Je parie sur le float. D’ailleurs, pourquoi un float left ? Float, c'est très spécifique comme usage et pour la mise en page c'est pas top vu que ca sort l'élément du flux normal...

Merci pour ta réponse.
Si je supprime le float, la mise en page part en vrille...

luxojr a écrit :
Merci pour ta réponse.
Si je supprime le float, la mise en page part en vrille...

Oui normal faut le remplacer par autre chose.

Déjà sur le .3-colonnes-bloc je ne pense pas que le float serve a quelque chose. C'est le bloc qui prendre toute la place et qui encapsule les colonnes c'est ça ? ici on s'en fiche du float...

Et pour mettre en forme tes colonnes tu peux utiliser inline-block, flex ou grid à la place de float.

Pas de résultat positif avec 'inline-block' et 'flex', je n'ai pas testé 'grid'.
Je ne comprends pas ppourquoi tout s'affiche correctement dans Dreamweaver et pas dans le navigateur...

Hello, effectivement c’est du au float. Soit tu peux ajouter un élément after qui fera un clear: both/left pour annuler l’effet float. Soit tu peux supprimer les 2 floats, supprimer le width, assigner un display flex sur le parent, et un flex: 1 1 0 sur les columns. En plus si tu veux tu peux avoir un flex-wrap: wrap sur ton parent et un min-width sur les enfants pour le côté responsive (si tu as besoin).
Je n’ai pas testé car sur mon téléphone mais ça devrait être pas mal je pense

Merci à tous pour vos réponses.
Je vais donc refaire ma mise en page avec un display: flex etc.
JF

luxojr a écrit :
Je vais donc refaire ma mise en page avec un display: flex...

Un modèle en flex pour l'inspiration : Example layout for a blog.
Modifié par Olivier C (23 Jun 2020 - 11:30)