3 div indentiques sur meme ligne

bonjour,
je souhaiterai aligner 3 cadres au contenu différent sur une même ligne.
pour cela, j'ai créé une div au dimensions 200x170.
j'intègre donc ma div 3 fois dans ma div contenu qui fait 730 de largeur.

mon problème et que j'aimerai que la première div soit collée à gauche la 2eme centrée au milieu et la troisième collée à droite.

Dois-je faire 3 div différentes ? ou existe il une solution qui repartie les 3 div de façon proportionnel dans la largeur ?

#cadre200{
	float:right;
	width:200px;
	height:180px;
	margin:20px 0 0 0;
	border:solid 1px #333333;
}

et au niveau du html

    <div id="cadre200">
      <div id="titrecadre">Cadre gauche</div>
      Placez ici le contenu de  id "news"
    </div>
    <div id="cadre200">
      <div id="titrecadre">Cadre centre</div>
      Placez ici le contenu de  id "news"
    </div>
    <div id="cadre200">
      <div id="titrecadre">Cadre droite</div>
      Placez ici le contenu de  id "news"
    </div>

merci de votre aide
Modifié par fabrice88 (02 Jan 2009 - 15:57)

Hello,

J'essayerai ça :

#cadre200{
float:left;
width:200px;
height:180px;
margin:20px 21px 0 21px;
border:solid 1px #333333;
text-align:center; */ si tu as du inline qui suit pour le centrage du texte dans tes div /*
}

Modifié par copperfield (02 Jan 2009 - 16:22)

merci mais sa n'allait pas au niveau graphique du site car les balise n'etaient pas placé comme je le souhaitais.

j'ai donc fait un div pour chaque et attribué les valeurs pour que se soit tel que je le voulais.

#cadrecontact{
float:left;
width:200px;
height:180px;
margin:20px 0 0 0;
border:solid 1px #333333;
}

#cadreassist{
	float: left;
	width:200px;
	height:180px;
	margin:20px 0 0 45px;
	border:solid 1px #333333;
}
#cadrepack{
	float:right;
	width:200px;
	height:180px;
	margin:20px 0 0 0;
	border:solid 1px #333333;
}

merci

Bonjour,

Ça aurait pu marcher ainsi (avec un conteneur de 730px de large):

.colonne {
	float: left;
	width: 200px;
	height: auto; 
}
.colonne + .colonne {
	margin-left: 65px;
}

Le seul problème ici aurait été qu'IE6 ne supporte pas le symbole + dans un sélecteur. Mais bon, tant pis pour papy IE6.

Par ailleurs, en lisant ton code je vois deux erreurs de conception:

1. Tu n'exploites pas les classes pour factoriser ton code. Ici, il aurait fallu créer une classe pour les trois DIV pour leur donner un style commun, et peut-être utiliser un ou plusieurs identifiants (ou une ou plusieurs classes supplémentaires) pour les rares propriétés qui divergent. Pour info, ce que je fais dans le code CSS ci-dessus peut être fait avec une deuxième classe plutôt qu'en exploitant le symbole +, ce qui permet d'avoir la compatibilité IE.

2. Tu utilises des DIV pour des titres, alors qu'il y a des éléments spécifiquement prévus pour les titres. Si tu ne sais pas encore utiliser les titres H1, H2, H3, et gérer une structure de document cohérente, c'est une lacune à combler.

oui exacte, je vais utilisé les classes merci du conseil. Je change ça et j'essai ta méthode.

pour l'html je fais pour essayé ta méthode :

<div id="cadre200" class="colonne">
      <div id="titrecadre">Gauche</div>
      Placez ici le contenu de  id "news"
    </div>
    <div id="cadre200" class="colonne">
      <div id="titrecadre">centre</div>
      Placez ici le contenu de  id "news"
    </div>
    <div id="cadre200" class="colonne" >
      <div id="titrecadre">droite</div>
      Placez ici le contenu de  id "news"
    </div>

mais pour la classe + (donc pour la droite) comment je l'ecrie ?

merci beaucoup
Modifié par fabrice88 (02 Jan 2009 - 17:36)

Pour ton code HTML tu as toujours le problème des titres (comme je le disais c'est une lacune à combler), et tu utilises trois fois le même identifiant (attribut id) dans le code que tu donnes. C'est bien sûr une erreur, les identifiants devant être uniques.

Un code HTML un peu plus correct pourrait être (sous réserve que le niveau de titre soit correct):

<div class="colonne colonne-first">
	<h2>Gauche</h2>
	<p>Bla bla de gauche</p>
</div>
<div class="colonne">
	<h2>Centre</h2>
	<p>Bla bla du centre</p>
</div>
<div class="colonne">
	<h2>Droite</h2>
	<p>Bla bla de droite</p>
</div>

fabrice88 a écrit :
mais pour la classe + (donc pour la droite) comment je l'ecrie ?

Pas sûr d'avoir compris la question. Il n'y a pas de «classe +», mais un sélecteur d'élément adjacent qui utilise le symbole «+». Pour en savoir plus, lire un article sur les sélecteurs en CSS 2.1.

Ici le deuxième sélecteur (.colonne + .colonne {...}) signifie: pour tout élément portant la classe "colonne" et suivant directement un élément portant la classe "colonne". Ce qui correspond à toutes les colonnes sauf la première.

ok merci beaucoup sa fonctionne bien comme ça.
j'ai donc personnalisé mon h2 afin de lui mettre un fond vert mais j'ai une fois de plus un probleme sous firefox.

h2 {
	border-bottom:solid 1px #333333;
	background:#99CC00;
	width:auto;
	height:25px;
	line-height:25px;
	font-family:Arial, Verdana, Geneva, sans-serif;
	font-size:12px;
}

mon probleme est le suivant :
sous IE j'ai bien mon fond #99cc00; qui fait bien 25 de haut avec le texte bien aligné.
sous firefox j'ai bien ma couleures egalement mais en plus et juste ua dessus j'ai un espace vide d'environ 5 pixels.

d'ou c'est pixels vides viennent ils sous firefox ?
peut on les supprimé pour avoir un affichage comme sur ie ?



--> Résolu. j'ai mis une margin:0;
Modifié par fabrice88 (02 Jan 2009 - 20:41)

Pas mal, c'est exactement ce que je cherchais à faire.

Par contre quand je veux imprimer sous firefox, j'ai le texte des divs les uns en dessous des autres sans contour dans les tableaux..

comment tenir compte de la css pour l'impression?