Problème d'alignement surpenant

Bonjour,

Je souhaite mettre du texte sur deux colonnes, l'une alignée sur la gauche (texte justifié), l'autre à droite (texte aligné à droite), les deux débutant en haut de page. Le code ci-dessous fonctionne :

div.row span.left{
	float: left;
	background-color: #99CCCC;
	width: 70%;
}
div.row span.right{
	float: right;
	background-color: #99CCCC;
	width: 30%;
}
div.row span.left p{
	text-align: justify;
	margin-left:5px;
}
div.row span.right p{
	text-align: right;
	margin-right:5px;
}

Par contre j'ai tenté de réduire le nombre de déclarations en introduisant le formatage des paragraphes dans les div :

div.row span.left{
	float: left;
	background-color: #99CCCC;
	width: 70%;
	text-align: justify;
	margin-left: 5px;
}

div.row span.right{
	float: right;
	background-color: #99CCCC;
	width: 30%;
	text-align: right;
	margin-right: 5px;
}

et là je me retrouve avec la colonne de droite bien alignée à droite mais débutant après la fin de la colonne de gauche ! Le code de ma page php est le suivant :

<div style="width:100%; background-color:#99CCCC; text-align:left">
    <div class="spacer"></div>
    <div class="row"> 
        <span class="left">
        <p class="gris">Blabla</p>
        </span>
        <span class="right">
        <p>Bliblibli</p>
        </span>
    </div>
</div>

Merci pour vos éclaircissements !

Bonjour,

Première remarque, ton code n'est pas valide.

En effet, tu ne peux pas mettre un <p>aragraphe (de type bloc) dans un <span> (de type en-ligne). Tu DOIS mettre tes paragraphes dans des divs.

Concernant ton problème, je pense qu'en raplaçant les span par des div, il devrait être résolu (mais bon, c'est à tester).

Petit ajout, si tu n'as qu'un seul paragraphes de chaque côté, tu peux supprimer les span et appliquer les floats au paragraphes directement.