aligner 2 div cote à cote

**granulederiz** · 12/08/2010, 11h53

Bonjour,

J'essaie depuis hier d'aligner 2 div cote a cote pour l'affichage de mes articles wordpress pour que ca donne ca:

art1 | article 2
art 3 | article 4
etc...

j'ai réussi à mettre mes divs cote à cote, (remarquez ca marche que sur firefox, pas sur IE....), mais le souci c'est que mon div de droite (article 2, article 4) sont décalés vers le bas de 33px.(j'ai fait un margin négatif juska trouver le nombre de décalage)

j'ai beau chercher dans mon code, je trouve pas l'erreur!

1- Comment faire pour que mes divs soient parfaitement alignés comme sur ce site:
http://www.botwg.com/

2- comment faire pour que IE interprète cette fonction?

Voici mon code HTML de la zone concernée

il n'y a qu'une partie du code hein...)

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
19
20
21
22
 
	<div id="principal">
 
				<?php if(have_posts()) : ?><?php while(have_posts()) : the_post();?>
 
		<div class="miniature">
			<div class= "post" id="post-<?php the_ID(); ?>">  
				<div class="titre-article">
						<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><!--titre de l'article-->
				</div>
 
			<div class="post_content">
				<div class="vignette">
				</div>
					<?php
    if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
    the_post_thumbnail(array( 152,152 ), array( 'alt' => 'alttext', 'title' => '<?php the_title(); ?>'));
} else {
    echo '<img src="http://www.xxx.fr/wp-content/uploads/2010/06/sans.jpg" alt="mettre image en ligne" title="image" />'; }
 
?>
			</div>

Puis , mon CSS:

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
.miniature{
border:1px solid red;
width: 210px;
height:230px;
display:inline;
float:left;
margin-top:0;
 
background-color: #efefef;
}
 
 
#principal {
overflow-x: hidden;
 
overflow-y: hidden;
	float: left;
	width:610px;
background:url(img/bgcentre1.jpg) repeat;
margin-top:120px;
min-height:1150px;}
 
.post{
font-family:Century Gothic, Verdana, Arial;
 
margin-left:15px;
 
font-size:13;
}
/*Zone des titres des articles*/
.post .titre-article{
 
margin-bottom:10px;
font-family:Century Gothic, Verdana, Arial;
}
 
/*texte du titre des articles*/
.post .titre-article a{
color:#5a5f0e;
font-weight:bold;
font-family:Century Gothic, Verdana, Arial;
font-size:10px;
text-decoration: none;
}
 
/*texte du titre des articles au survol*/
.post .titre-article a:hover{
color:#a1a91e;
font-weight:bold;
font-family:Century Gothic, Verdana, Arial;
font-size:10px;
text-decoration: none;}
 
 
.post_content a{
text-decoration:none;
color:#536f0f;
font-family:Century Gothic, Verdana, Arial;
font-style:italic;
font-weight:bold;
font-size:13px;
 
border:none;}
 
 
 
.post_content a:hover{
font-family:Century Gothic, Verdana, Arial;
color: white;
background:#1e504d;
}
 
 
 
.post_content .vignette img{
 
 
width:158px;
height:158px;
border-top: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;}

Merci aux bonnes âmes de ce site de m'aider!!
bonne journée!

**m1ckros** · 12/08/2010, 14h01

Peut-être qu'avec du code HTML et CSS propres (bien indentés, dans les balises CODE, sans contenu PHP), ça ira plus vite.

Là, j'ai copié-collé ce que tu donnes dans une page HTML et ça ne donne rien de bien génial.

Sinon, comme ça, à froid, je proposerais bien les propriétés CSS :

Code :

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