[Résolu] CSS3: problème de cohabitation entre le float et le border!

Bonsoir à toutes et tous!

Je requière votre aide.
J'ai créer 2 div qui contiennent chacune un article et je veux que mes 2 articles soient côte à côte.

donc dans mon css je mets à mes articles une width de 48%, un float left et un margin de 0.
Jusqu'ici tous va bien, mais lorsque je rajoute mon border solid, le 2ème article décent d'un niveau.

Quelqu'un aurait-il une alternative ou une technique secrète?

Bonjour,

Il doit manquer quelque chose car il ne doit pas y avoir de problèmes de flottement avec les seuls éléments que tu donnes.

Envoie plus d'éléments comme les propriétés de ton conteneur....

Tu peux consulter ce lien : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
Modifié par rodolpheb (21 Dec 2012 - 18:22)

Bonjour,

La marge s'ajoute à la largeur des blocs. Si la marge ajoutée à la largeur des blocs, plus l'éventuel espacement fait plus que 100% de l'espace disponible ; il est normal qu'un des blocs aille à la ligne.

La solution est donc de réduire la taille des bloc (ou de passer sur des largeurs fixes).

il y a aussi box-sizing:border-box; qui intègre bordures et marges internes dans la largeur définie.

++
Modifié par gc-nomade (21 Dec 2012 - 18:53)

voila le css de mon conteneur et des articles:

.gridContainer {
	width: 92.4333%;
	max-width: 1232px;
	padding-left: 0.7833%;
	padding-right: 0.7833%;
	margin: auto;
}

#article1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 49.1525%;
	display: block;
	border:solid 1px #FF6600;
}

Laurie-Anne: il n'y as pas de marge.

gc-nomade a écrit :
il y a aussi box-sizing:border-box; qui intègre bordures et marges internes dans la largeur définie.

++

box-sizing:border-box; ne fonctionne pas non plus.

tes deux boite de 49.1525 + tes deux padding de 0.7833 squattent 99.8716% de la largeur du parent. reste 0.1284% pour caler 4bordures latérale de 1px ...
Je te laisse calculer la largeur dminimale du parent qu'il te faut pour avoir ces 4 pixel dispos.

Sans compter les arrondies que fait le navigateur....

++
Modifié par gc-nomade (21 Dec 2012 - 19:00)

Oui en effet je viens juste de le voir.
j'explique comme je fais mon site en responsive, j'étais dans la partie des tablettes au lieu des bureaux...comme quoi .
Désolé pour le dérangement et merci pour votre aide!