28172 sujets

CSS et mise en forme, CSS3

[Résolu] Trois colonnes non alignées

bonjour

je réalise une page ayant 3 colonnes - colonneGAUCHE et colonneCENTRE sont bien alignées horizontalement mais colonneDROITE est placé en dessous des deux première colonnes - voila shématiquement ce que cela donne :

upload/57968-CSS3colonn.png

et voila les ligne de code CSS :

#colonneGAUCHE {display: block; float: left; width: 440px; padding-left: 5px; padding-right: 4px; padding-top: 6px; padding-bottom: 5px; margin-left: 30px; margin-right: 10px; text-align:justify}

#colonneCENTRE {display: block; width: 440px; padding-left: 5px; padding-right: 4px; padding-top: 6px; padding-bottom: 5px; margin-left: 490px; margin-right: 10px; text-align:justify}

#colonneDROITE {width: 440px; float: right;  padding-left: 5px; padding-right: 4px; padding-top: 6px; padding-bottom: 5px; margin-left: 970px; margin-right: 10px; text-align:justify}


merci d'avance de vos éclairssisements
bonjour,
outre la marge gauche démesurée pour la colonne de droite, et surtout inutile - voire dangereux... - pour un élément flottant à droite,
le problème vient probablement du code HTML : ne pas oublier d'écrire la colonne droite AVANT la colonne centre, sinon la colonne droite ira en dessous de la colonne centre comme sur le schéma, ne pas oublier le sens du flux
Modifié par farang (18 Nov 2015 - 10:01)
je pensai farang que les flux étaient :

de gauche à droite puis lors du passage à la ligne de bas en haut

as-tu des lien à propos du sens du flux qui infirmerait cela ?

j'ai quand même essayée de placer la colonne droite avant la colonne centre dans HTML et voila ce que cela donne

upload/57968-CSSbis3col.png

le problème n'est pas résolu - je n'ai toujours pas les trois colonnes bien alignées horizontalement
as tu bien supprimé la margin-left de la colonne droite ? Elle n'est pas utile mais au contraire renvoie la colonne centre en dessous si la fenêtre n'est pas assez large, non ?
Pour le flux, un élément de type "block" est précédé et suivi d'un passage à la ligne, peu importe sa largeur, je ne comprends pas bien le "de bas en haut", par rapport à quoi ?
Autres solutions possibles : des "display:inline-block", ou des "display: table-cell" pour les 3 colonnes
Bonjour,

Je m'y essaye aussi.

Je suis d'accord avec farang t'as pas besoin des margin-left énorme que tu mets.
De plus si c'est des div pourquoi des display:block ?

Voilà ce que je te proposerai et tu n'as plus qu'à y mettre les marge et autre padding de ton choix Attention au padding, il foute vite le brun si tu peux t'en passer passe t'en (Ce n'est que moi qui le dit Smiley smile )

<html>
<head>
	<title>Titre de ma page</title>
	<meta charset="utf-8">
<style>
#colg{
	width: 440px;
	min-height:100px;
	background-color:green;
	float:left;
}
#colc{
	width: 440px;
	min-height:100px;
	background-color:blue;
	float:left;
}
#cold{
	width: 440px;
	min-height:100px;
	background-color:red;
	float:left;
}

</style>
</head>
<body>
		<div id="colg"></div>
		<div id="colc"></div>
		<div id="cold"></div>
</body>
</html>


Je t'ai mis des hauteur min de 100px que tu pourras ajuster voire enlever si t'as du contenu.
Et pour le résultat :
upload/60444-Capture.JPG
Bonjour,

Ah par pitié, factorisez un peu, utilisez des class Smiley sweatdrop 
<html>
<head>
	<title>Titre de ma page</title>
	<meta charset="utf-8">
<style>
#colg{
	width: 440px;
	min-height:100px;
	background-color:green;
	float:left;
}
#colc{
	width: 440px;
	min-height:100px;
	background-color:blue;
	float:left;
}
#cold{
	width: 440px;
	min-height:100px;
	background-color:red;
	float:left;
}

</style>
</head>
<body>
		<div id="colg"></div>
		<div id="colc"></div>
		<div id="cold"></div>
</body>
</html>


... peut s'écrire plus facilement :
<html>
<head>
	<title>Titre de ma page</title>
	<meta charset="utf-8">
<style>
.col {
	width: 440px;
	min-height:100px;
	float:left;
}
#colg { background-color:green; }
#colc { background-color:blue; }
#cold { background-color:red; }

</style>
</head>
<body>
		<div id="colg" class='col'></div>
		<div id="colc" class='col'></div>
		<div id="cold" class='col'></div>
</body>
</html>

Et encore, perso j'utiliserais encore les class pour différencier les colonnes plutôt que les id...
bonne idée Soxy95 - j'ai utilisée ta méthode - et en factorisant SolidSnake les ligne de code sont plus claire et ca marche
Sujet clos
Aller à