[CSS 3] Comment positionner des <article> à droite et a gauche

pierrot10 · 21/02/2011, 18h40

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

NoSmoking · 21/02/2011, 19h00

Bonjour,
H2, comme les autres H est un élément bloc qui supporte text-align, donc associé à left le titre sera aligné à gauche, comportement par défaut, et associé à right le titre sera aligné à droite.

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
15
16
17
18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>[...]</title>
<style type="text/css">
.gauche {
  text-align:left;
}
.droite {
  text-align:right;
}
</style>
</head>
<body>
<h2 class="gauche">Titre alignement Gauche</h2>
<h2 class="droite">Titre alignement Droite</h2>
</body>
</html>

pierrot10 · 27/02/2011, 22h53

Salut merci pour ta réponse.

Je crois que tu n'as pas compris mon problème,

Je ne souhaite pas agir sur le <hx> mais sur les articles

Code :

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

1
2
3
 
<article class="left"></artcle>
<article class="right"></article>

NoSmoking · 28/02/2011, 19h49

dans ce cas le plus simple est de mettre une DIV gauche et une DIV droite dans ta DIV section

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#center{
  background-color:#ffffff;
	overflow : hidden;
	width : 100%;
}
#div_gauche {
  width :  50%;
  float : left;
}
#div_droite {
  width :  50%;
  float : right;
}
</style>
</head>
<body>
<section id="center">
  <div id="div_gauche">
    <article>
      <h2>Titre gauche</h2>
    </article>
    <article>
      <h2>Titre gauche 2</h2>
    </article>
  </div>
 
  <div id="div_droite">
    <article>
      <h2>Titre droit 1</h2>
    </article>
    <article>
      <h2>Titre droit 2</h2>
    </article>
  </div>
</section>
</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email