Discussion :

[Ghunter59]

Bonjour,

Je suis actuellement en train de réaliser un site pour lequel j'utilise des css.

Mon objectif est de réaliser un affichage de type :

div1 div2
div3 div4
...

avec les div de chaque ligne commencant au meme niveau

J'arrive sans aucun probleme à aligner les div en utilisant
float:left;
cependant je n'arrives pas à les faire s'aligner au meme niveau. J'ai voulu insérer chaque div de chaque ligne dans un div conteneur de taille fixe, ce qui me permettrait d'afficher simplement les div conteneur les uns en dessous des autres et donc d'obtenir le rendu escompté. Cependant, l'utilisation de float sort les div enfant du flot normal et donc je les retrouves en dehors de mon conteneur. Si je supprime ce float, mes div enfants se retrouvent alors effectivement dans les conteneurs mais les uns en dessous des autres...

Pourriez vous me dire comment faire pour afficher mes div cote à cote dans les contenant ?

Code CSS concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.conteneur{
	width:100%;
}
 
.gauche{
	width:45%;
	padding-left:10px;
	border-style:outset; 
	border-color:grey; 
	border-width:2px;
	margin-left: 10px;
}
 
.droite{
	display:block;
	padding-left:10px;
	width:45%;
	border-style:outset; 
	border-color:grey; 
	border-width:2px;
	margin-left: 5px;
}

Code HTML associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="conteneur">
	<div class="gauche">
	<h5>Fiche 1</h5>
	...
	</div>
	<div class="droite">
	<h5>Fiche 2</h5>
	...
	</div>
</div>
<div class="conteneur">
	<div class="gauche">
	<h5>Fiche 3</h5>
	...
	</div> 
	<div class="droite">
	<h5>Fiche 4</h5>
...
	</div>
</div>

Merci d'avance !

P.S.: Je ne veux en aucun cas utiliser des tableaux...

[Orelz]

Bonjour,

Tu peux aussi créer des span, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
div {
text-align: right;
clear: both;
}
div span {
float: left;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><span>ton texte pour la gauche</span>ton texte pour la droite</div>

J'espère que cela t'aidera

[Ghunter59]

Ca fonctionne comme ca ! Merci beaucoup pour ton aide