Allignement en CSS

Bonsoir,

Voilà comment se présente la situation dans ma tête.

J'ai un div de 400 x 10 pixels avec une bordure noire solide de 1 pixel.

A gauche de ce div, j'écris "gauche" et à droite "droite" j'aimerais tout simplement aligner du texte à gauche et à droite, mais, sur la même ligne !

Le float left et right ne semble pas fonctionner dans mes tests.

À priori si, les flottants devraient faire parfaitement l'affaire. Avec ne fut-ce que quelques lignes de code, on pourrait peut-être t'aider davantage…

<p class="container"><span class="aleft">Text</span><span class="aright">Text</span></p>

.container {
	width: 525px;
	border: 1px solid #bbc0c1;
}
.aleft {
	float: left;
}
.aright {
	float: right;
}

Pas terrible...
Modifié par Enum (13 Nov 2007 - 10:14)

Salut,

bon en novice je dirais tes .aleft et .aright n'ont pas de width alors il doivent se mettre l'un sous l'autre.

essai de leur mettre une width a chacun dont la somme ne depasse pas la taille de leur conteneur.

pascal

Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Enum a écrit :
<p class="container"><span class="aleft">Text</span><span class="aright">Text</span></p>

.container {
width: 525px;
border: 1px solid #bbc0c1;
}
.aleft {
float: left;
}
.aright {
float: right;
}

Pas terrible...

Hé bien ceci devrait parfaitement fonctionner. Quel est le problème au juste? Est-ce le conteneur qui n'englobe pas son contenu ou un soucis de positionnement?

C'est ok pour l'alignement, mais le container n'englobe pas le texte...

<div class="container">
              	<p class="floatLeft">Gauche</p>
              	<p class="floatRight">Droite</p>
              </div>

.container {
	border: 1px solid #bcc0c1;
	width: 524px;
}

.floatLeft {
	float: left;
	width: 262px;
}
.floatRight {
	float: right;
	width: 262px;
}

Enum a écrit :
C'est ok pour l'alignement, mais le container n'englobe pas le texte...

Oui, ça c'est normal. Pour contraindre ton conteneur à englober ses enfants flottants, tu peux créer un contexte de formatage:

.container {overflow:auto}

Sinon, inspiré de la FAQ de ce site, j'ai fais ça, sauf que l'alignement ne se fait hélas pas comme je veux...

<div id="container">
     <p><span>partie à gauche</span>partie à droite</p>
</div>

#container {
	border: 1px solid #505050;
}
#container p {
	text-align: right;
	clear: both;
}
#container p, span {
	text-align: left;
}

Enum,

As-tu essayer la solution de Benjamin en créant un contexte de formatage sur ton container ? Cette solution fonctionne

Ben en fait la solution sur la FAQ du forum m'a l'air plus propre. Mais elle ne marche pas... je dois faire quelque chose de mal...

Enum a écrit :
Ben en fait la solution sur la FAQ du forum m'a l'air plus propre.

Qu'est-ce qu'il ne faut entendre…

Enum a écrit :
Mais elle ne marche pas... je dois faire quelque chose de mal...

Effectivement: il s'agit de faire flotter à gauche la partie voulue (le span, donc) et non d'y appliquer un text-align inutile ici.