28172 sujets

CSS et mise en forme, CSS3

Un probleme d'alignement de <div>

Bonjour a tous et merci d'avance pour la lecture que vous ferez de mon post.
Dans un premier temps à la lecture du titre je le sais je ne suis pas le premier et certainement pas le dernier qui vient vous voir à cause de tel problème.
Mais hélas, n'etant tout d'abord que débutant en html/css il est possible que les lectures que j'ai faite en réponses des autres ayants eu le mêmes problemes ne soit pas parfaites.

J'en vient donc à mon probleme classique : j'arrive donc au niveau de la div contenu de mon site avec une largeur limité et centré par un margin auto.
A l'interieur de celle-ci j'aimerais integrer 3 collones chacunes de largeurs identiques et ne dépassant pas l'une sur les autres.
Pour ce faire il y a donc trois div a l'interieur de ma div contenu.
J'ai bien essayé d'une part de les mettres toutes les 3 en float left et sa marche... mais que pour les deux premiers la 3emes allant elle a la ligne.
Voici le code de cette essai


.contenuhome
{
	width:797px;
	margin: auto;
    padding: 0px;
	
}

.contenuhome2
{
	float:left;
	text-align:left;
	width:265px;
	max-width:265px;
	padding:5px;
	background-color:#0030ff;
}

.contenuhome3
{
	float:left;
	text-align:left;
	width:265px;
	max-width:265px;
	padding:5px;
	background-color:#ff3600;
}

.contenuhome4
{
	float:left
	text-align:left;
	width:265px;
	max-width:265px;
	padding:5px;
	background-color:#00ff1e;
}


PS: si les couleurs sont différentes c'etait uniquement pour visualisé les collones.

Merci d'avance pour l'aide que vous pourrez m'apporter.
Modifié par mike78120 (14 Jul 2010 - 08:34)
Bonjour,

La 3ème colonne passe à la ligne parce qu'il n'y a pas assez de place pour elle :
(265px (largeur de colonne) + 10 px (padding de 5px * 2))* 3 = 828 px

825px > 797 px -> la troisième colonne passe à la ligne.

Attention à ne jamais oublier les paddings dans le calcul de largeur de bloc Smiley cligne
Modifié par Laurie-Anne (14 Jul 2010 - 15:17)
Oh bon sang mais quel noob je suis !!!! Effectivement les paddings etant a l'interieur des "petites boites" je ne pensais pas qu'ils élargissaient et pourtant c'est le cas en tout cas sa fonctionne alors MERCI MERCI MERCI sincerement sa me prenais la têtes a un tel point enfin toutes ces recherches m'auront permis d'accroitre mes connaissance en language CSS.
Probleme résolu et encore merci !
Sujet clos
Aller à