bonsoir
oki , je n'avais pas compris le résultat souhaité.
A priori le inline-block (façon W3c) ne peut convenir , car 4 élements se suivent dans le flux et peuvent alors etre inline (ou inline-block) sur la même ligne (idem si display:table-cell;) ou en block , l'un sur l'autre , le float a le même effet , le clear sur le second decallerait les suivant horizontalemnt (excepté IE qui bug sur ce point en faisant remonté les flottants suivants au niveau du premier , enfin , me semble t-il ).
On peut essayer en extrayant l'un des 2 premiers div , du flux , avec un position:absolute , et mettre en ligne les 3 suivant en float.
(la encore IE , n'est pas au top ) ,En jouant sur les marges negatives avec hauteur fixe sur le premier div , ça a l'air jouable .
donc avec ta contrainte html peut-etre que :
<div class="itemTable" >
<div class="itemTitle">
<a href="http://www.example.com">texte</a>
La Tribune.fr - A LA UNE
</div>
<div class="itemDescriptif">
Nullam hendrerit molestie justo. Phasellus porttitor lacus vel ipsum.
Nullam lectus tellus, lacinia sit amet, luctus varius, porta vitae, urna.
Maecenas vehicula neque. Pellentesque gravida quam quis pede.
Mauris eleifend massa vitae velit. Praesent ultrices vestibulum justo.
Quisque eget orci.
In ligula nisi, aliquam ac, condimentum non, scelerisque ut, elit.
</div>
<div class="itemPubDate">
Fri, 18 Jan 2008 17:52:00 GMT
</div>
<div class="itemScore">
score <br />0.2
</div>
</div>
et
/*
* {padding:0;margin:0;}
*/
/*reset pour test*/
div.itemTable {
text-align:left;
width:900px;
background:#008000;
margin:1em 0;
overflow:hidden;
}
.itemTitle {
border-bottom:2px solid white;
margin-bottom:-1.8em;
width:700px;
height:1.7em;
position:relative;
z-index:1;
}
div.itemTitle a {
}
div.itemDescriptif {
background:#FFA500;
width:700px;
margin:0;
float:left;
border-right:2px solid white;
padding-top:1.7em;
}
.itemPubDate , .itemScore {
float:left;
padding-top:0.5em;
}
.itemPubDate {
width:150px;
}
.itemScore {
background:blue;
padding:6px;
width:35px;
}
</style>
<!--[IF IE ]>
<style type='text/css'>
div.itemDescriptif {
padding-bottom:1.8em;/* on recupere la marge négative de l'élement precedent.*/
}
</style>
<![ENDIF]-->
bon pas terrible ! difficile a maintenir et facile a mettre en vrac .
Sans contrainte html , en regoupant les 2 premiers div , le 'inline-block; devient possible.
Ceci dit , je me tournerais plus volontiers vers le display:table; avec un display:inline-block; forcé pour IE . Pour IE , la mise en place des fonds sera mal-aisé .
test html :
<div class="playtable">
<div class="playcell un ">
<h1><a href="http://www.example.com">texte</a>La Tribune.fr - A LA UNE</h1>
<p> Nullam hendrerit molestie justo. Phasellus porttitor lacus vel ipsum.
Nullam lectus tellus, lacinia sit amet, luctus varius, porta vitae, urna.
Maecenas vehicula neque. Pellentesque gravida quam quis pede.
Mauris eleifend massa vitae velit. Praesent ultrices vestibulum justo.
Quisque eget orci.
In ligula nisi, aliquam ac, condimentum non, scelerisque ut, elit.</p>
</div>
<div class="playcell deux">
Fri, 18 Jan 2008 17:52:00 GMT
</div>
<div class="playcell trois">
score<br />
0.2
</div>
</div>
et le css associé:
<style type='text/css'>.playtable , .playcell {
vertical-align:middle;
display:table-cell;
}
.playtable {
background:green;
width:80%;
margin:1em 0;
padding:0;
display:table;
min-width:800px;
}
.un {
background:#FFA500;
width:80%;
border-right:2px solid white;
}
.un h1 {
border-bottom:2px solid white;
font-size:1.2em;
margin:0;
padding:1px;
}
.deux {
width:15%;
border-right:2px solid white;
}
.trois {
background:blue;
}
</style>
<!--[IF IE ]>
<style type='text/css'>
.playtable , .playcell {
display:inline;
zoom:1;
}
/* pour habiller le fond en simili colonnes , un fond une largeur fixe devra etre specifié pour IE pour div.playtable. */
</style>
<![ENDIF]-->
La fluidité est plus aisé , cependant IE ne reproduit toujours pas de tableau , un fond devra reproduire l'effet colonne dans IE , nécessitant de fixer la largeur.
En final , vaudrait quand-même mieux touver une soluce pour reprendre le html (coté serveur ?) , en balisant de façon plus pertinente , (tableau th , td ou
si casse-coup en html , hn , p , ...).
page test reprenant les propositions :
http://gcyrillus.free.fr/essai/tableaudiv_inlineblock.html 
