Bonjour,
Je ne sais pas si j'ai choisi la meilleur stratégie.
Ma structure est la suivante:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14 <section id="center" class="arondi_t_l arondi_t_r arondi_b_r arondi_b_l"> <article class="left"> <h2>Titre gauche</h2> </article> <article class="left"> <h2>Titre gauche 2</h2> </article> <article class="right"> <h2>Titre droit 1</h2> </article> <article class="right"> <h2>Titre droit 2</h2> </article> </section>
Dans ma section "center", j'aimerais qu tous les articles avec la class right, se collent sur e bord gauche de la section "center", et que tous les articles avec la classe "right" se colle sur le bord droit de la section parente.
J'aimerais bien savioir la meilleur solution que vous me recommanderiez.
Dans mon cas, mon CSS est le suivant
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 section#center{ background-color:#ffffff; overflow:hidden; padding:10px; } article.left, article.right{ width:49%; } article.left{float:left; margin-right:5px; clear:left;} article.right{float:right; margin-left:5px; clear:right; border:1px solid #ff22ff;}
C'est pa super top, surtout sur Safari.
J'ai aussi essayer de faire avec des positions:absolute
Code CSS : 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 section#center{ background-color:#ffffff; overflow:hidden; position:relative; padding:10px; } article.left, article.right{ width:49%; } article.left{ position:absolute; left:0px; margin-right:5px; } article.right{ position:absolute; right:0px; margin-left:5px; border:1px solid #ff22ff;}
Mais dans ce dernier cas, mes artciles se placent bien à gauch et à droite, mais tous mes articles de gauche sont l'un dessus de l'autre au lieu d'être en dessous de l'autre.
Idem, pour mes articles de droite.
Que me conseilleriez-vous, sans utiliser des tableaux
Milles mercis
Partager