Et maintenant en utilisant "float:left" !

Le code HTML et CSS

<div id="container">
<div class="left">
	une case
</div>
<div class="right">
	une deuxième une deuxième une deuxième
</div>
<div class="left">
	une case
</div>
<div class="right">
	une deuxième case
</div>
texte qui est dans le conteneur "container"
</div>

#container {
width:400px;
background-color:#D9D5BF;
}

.left {
height:100px;
width:100px;
border-style:solid;
border-width:1px;
border-color:black;
text-align:center;
float:left;
}
.right {
height:100px;
width:100px;
margin-left:250px;
border-style:solid;
border-width:1px;
border-color:green;
text-align:center;
position:relative;
}

Commentaires

Ordre d'apparition des bloc "div" dans le HTML

Comme pour le float:right, le bloc "float" doit être écrit avant l'autre bloc dans le HTML.

Mais ici, il faut ajouter une marge à gauche du bloc de droite (margin-left:250px)! Et cette marge doit positionner le bloc de droite au-delà du bloc "float" (de gauche), sinon le bloc de droite sera affiché au-dessous, et non à droite comme prévu.

C'est pas simple les CSS !