Positionnement CSS, j'comprends rien !!

Version imprimable

Bon, je comprends pô...:boulet:
J'ai du code php qui récupère des messages et les réponses correspondantes.
J'aimerais afficher ça en 2 colonnes :
une à gauche avec les message
une à droite avec la réponse.

Et bien entendu j'aimerais que la réponse soit aligner avec le message.
Or, je n'y arrive pas....Ca marche très bien pour une ligne (un message et une réponse) mais pour deux c'est la mort.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div class=conteneur> <div class=message> MESSAGE </div> <div class=reponse> REPONSE </div> <div class=message> MESSAGE2 </div> <div class=reponse> REPONSE2 </div> </div>
CSS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 .message { float : left; border: solid 1px #FF0000 ; font-family:verdana, sans-serif; font-size:80%; color:blue; background-color:yellow; width:30%; /*margin:1px;*/ } .reponse { float: right; border: solid 1px #FF0000 ; font-family:verdana, sans-serif; font-size:80%; color:blue; background-color:cyan; width:30%; /*margin:1px;*/ }
Ca m'enerrrrrrrrve le positionnement en CSS.... :furieux:

c'est simple, utilise un conteneur par ligne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <div class=conteneur> <div> <div class=message> MESSAGE </div> <div class=reponse> REPONSE </div> </div> <div> <div class=message> MESSAGE2 </div> <div class=reponse> REPONSE2 </div> </div> </div>
Ou bien oriente-toi vers la propriété clear: both; qui empeche d'avoir un flottant à côté, ça met automatiquement à la ligne. Mais pour ton cas, ce n'est pas approprié, choisis donc ma soluce :wink:

16/01/2006, 15h41
guano

Je comprends pas , ca marche pas...
tu laisses bien les float ?
16/01/2006, 15h46
SpaceFrog

Code:

<div class=message>

syntaxe permissive d'IE

Code:

<div class="message">
16/01/2006, 15h48
guano

Merci , mais j'utilise mozilla.
Purée ça me saoule ce merdier, ça se place n'importe comment...
16/01/2006, 15h51
Trunks

Oui je laisse bien les float. Il faut juste ajouter les div normalement. Les div étant de type 'block', par défaut se mettent les uns en dessous des autres, donc ça devrait marchait. As-tu ton exemple en ligne?
16/01/2006, 15h51
SpaceFrog

ben raison de plus il faut le quotes !!!
16/01/2006, 16h04
guano

http://viroflaybf.free.fr/test2.htm
http://viroflaybf.free.fr/styleessai.css

fallait ajouter un overflow: auto;

CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.conteneur
{
border: solid 1px #FF0000 ; 
font-family:verdana, sans-serif;
font-size:80%;
color:blue;
background-color:green;
width: 80%;
height:100%;
margin: 1px;
padding: 20px;
}
 
.ligne
{
overflow: auto;
}
 
.message, .reponse
{
float : left;
border: solid 1px #f00;
font-size:80%;
color:blue;
width:30%;
}
 
.message
{
background-color:yellow;
}
 
.reponse
{
background-color:cyan;
}

et pour le HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class=conteneur>
   <div class="ligne">
      <div class="message">
      MESSAGE
      </div>
 
      <div class="reponse">
      REPONSE
      </div>
   </div>
 
   <div class="ligne">
      <div class="message">
      MESSAGE2
      </div>
 
      <div class="reponse">
      REPONSE2
      </div>
   </div>
</div>
 
   <div class="ligne">
      <div class="message">
      MESSAGE3
      </div>
 
      <div class="reponse">
      REPONSE3
      </div>
   </div>
</div>

16/01/2006, 16h36
guano

Yes !!
Merci !!
Enfin...pour moi un bon vieux tableau c'est ce qui y'a de plus simple !

Merci en tout cas !!
16/01/2006, 16h40
Trunks

Tu peux mettre Résolu.
Les tableaux sont à éviter sémantiquement s'il ne s'agit pas de données tabulaires. Content de t'avoir aidé :P