Alignement de blocs

Bonjour à tous,

J'ai encore une question ou j'aurais besoin de vos lumières...

Je débute vraiment en CSS mais j'essaie de bidouiller pour adapter le système de news d'un wordpress.
A la base, sur le thème original que j'ai pris en base, les news sont affichées par blocs avec : titre, auteur, début du contenu, permalink, etc... Le truc classique.

Mon objectif était d'afficher l'image contenue dans l'article + le titre, le tout mis en forme de façon assez sympa quand même.

Ça fonctionne plutôt bien, simplement j'ai un problème d'alignement que je ne comprend pas : la dernière news se décale par rapport aux autres.

Voici le lien : Page d'accueil

Voici le code CSS un peu bricolé (pas taper!) :

#news {
	/* background-color: #F7F7F7; */
	/* border: 1px solid #DBDBDB; */
	width: 200px;
	border: 1px solid #000000;
    	display: inline-block;
	height: 200px;
	background:#fff;
	/* padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px; */
	border-radius: 10px 10px 10px 10px;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, "sans-serif";
 	-webkit-font-smoothing: antialiased;
  	-moz-font-smoothing: antialiased;
  	font-smoothing: antialiased;
	font-size: 14px;
	color: #000000;
	float: top;
   	margin-bottom: 50px;
	max-height: 200px;
}

#news .bandeau {
    /* background: url("http://www.leblogdecosaintmaclou.com/wp-content/themes/magazeen/images/fdconseil_titre.png") repeat scroll 0 0 transparent; */
	background: #ffffff;
    	display: inline-block;
	float: top;
	position: Inherit;
    /* margin-bottom: 20px; */
    min-height: 25px;
	border-radius: 10px 10px 10px 10px;
    /* padding: 5px 5px; */
    width: 190px;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px; 
    z-index: 100; 
	text-align: center;
	border: 1px solid #000000;
} 

#news .news-img {
	border-radius: 10px 10px 10px 10px;
	position: relative;
	top: 0;
	left: 0;
}

#news .news-img a:hover{
	border-radius: 10px 10px 10px 10px;
	position: relative;
	top: 0;
	left: 0;
}

#news a {
	font-family: 'Amaranth', sans-serif;
	font-size: 20px;
color: #000000;

} 

#news a:visited {
	font-family: 'Amaranth', sans-serif;
	font-size: 20px;
color: #000000;

} 


#news a:hover {
	font-family: 'Amaranth', sans-serif;
	font-size: 20px;
color: #dc352f;

} 

Si quelqu'un arrive à repérer d'ou ça vient...

Un grand merci !

hello !
première remarque, tu devrais attribuer "news" comme une classe et non un ID.
Enfin pour résoudre ton problème, supprime ton display: inline-block; et remplace le par un float: left et un margin right (ou left ? ) de ton choix !


en espérant t'avoir aidé !
a +
Modifié par saajuck (11 Sep 2011 - 14:00)

Si news est utilisé une seule fois par page, on s'en fout que ce soit une id ou une class
sinon +1 pour saajuck, essaie

{
float:left;
margin-right:5px;

}

Il apparaît une fois dans le Template, mais c'est une boucle, chaque article aura l'ID news.... il faut donc une class !