ca marche toujours pas un decalage

j'ai mis le contenu gauche en float: left;

Essaie peut-être en résonnant autrement : Tu ne vas pas mettre ton contenu par colonnes mais par lignes. Ainsi une ligne = Le contenu de gauche + le contenu de droite en mettant le contenu de gauche en float:left

<div class="mainContent">
<ul>
<li class="rightContent">right1</li>
</ul>
<ul>
<li class="leftContent">
left1
<br />
un autre texte ici qui fait le defaut
<br />
un autre texte ici qui fait le defaut
<br />
un autre texte ici qui fait le defaut
</li>
</ul>
</div>

.mainContent {
	width: 500px;
    height: auto;
	margin-left: auto;
	margin-right: auto;
	}

.rightContent, .leftContent {
	height: auto;
}

.rightContent {
	width: 120px;
	float: right;
	background-color: fuchsia;
}

.leftContent {
	width: 380px;
	float: left;
	background-color: olive;
}

bonjour,

J'ai essaye de mettre une mise en page sans tableau, avec 2 colonnes, une en face de l'autres, et 3 lignes:

http://imageshack.us/photo/my-images/155/misepage.png/

right1, right2 et right3 doivent etre juste en face de left1, left2 et left3 suivant cette ordre, si vous avez remarque il y a un decalage au niveau de left1, qui comporte 4 lignes, comment les mettre en ordre afin de recevoir un bon resultat, voila le code:

[html]
<div class="mainContent">
<ul>
<li class="rightContent">right1</li>
</ul>
<ul>
<li class="leftContent">
left1
<br />
un autre texte ici qui fait le defaut
<br />
un autre texte ici qui fait le defaut
<br />
un autre texte ici qui fait le defaut
</li>
</ul>
</div>
[/html]

le code css:

[html]
.mainContent {
width: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
}

.rightContent, .leftContent {
height: auto;
}

.rightContent {
width: 120px;
float: right;
background-color: fuchsia;
}

.leftContent {
width: 380px;
float: left;
background-color: olive;
}

[/html]

merci