Suivez les fils RSS
 
Auteur
daedale
# 03 Jul 2009 - 11:55:17
Citer
1 Posts
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 !

^
Laurie-Anne
# 03 Jul 2009 - 12:07:26
Citer
Modérateur
5736 Posts
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.

http://laurie-anne.bourdain.name 
^