Positionner 2 DIV côte à côte et alignés vers le bas

Marsh Posté le 24-01-2008 à 03:49:02

Un peu d'aide s'il vous plaît.

Code :

<html>
<head>
<style>
#all{
width: 250px;
border-width: 6px;
border-style: dotted;
border-color: blue;
}
#all div{
display:inline;
width: 95px;
margin: 12px;
background-image: url('http://img175.imageshack.us/img175/6633/incb7.gif');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="all">
<div style="background-position:4px 98px"><img src="http://img244.imageshack.us/img244/2290/smalloutiq0.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
</div>
</body>
</html>

J'essai de mettre 2 div côte à côte et alignés vers le bas en les mettant en inline, mais les elements en inline ne supportent pas les background-image sous FF et NN.
IE :

FF & NN :

---------------------------------------

Code :

<html>
<head>
<style>
#all{
width: 250px;
height: 780px;
border-width: 6px;
border-style: dotted;
border-color: blue;
}
#all div{
float: left;
display: inline; /* Pour bug IE */
width: 95px;
margin: 12px;
background-image: url('http://img175.imageshack.us/img175/6633/incb7.gif');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="all">
<div style="background-position:4px 98px"><img src="http://img244.imageshack.us/img244/2290/smalloutiq0.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
<div style="background-position:4px 38px"><img src="http://img155.imageshack.us/img155/2474/bigouteo3.gif" alt="" /></div>
</div>
</body>
</html>

Mettre un float sur ces div pour ne pas les mettre en inline donnerait ceci et je ne vois pas comment les aligner vers le bas avec un float.
IE :

FF & NN :