Texte1 Texte2 sur la même ligne, avec Texte2 à une position fixe

Bonjour

Je reviens vers vous avec la petite difficulté suivante :

J'ai un div de bas de page positionné en absolu dans un div conteneur positionné en relatif :

#Bas_de_page {
	position:absolute;
	bottom:10px;
	width:692px;
	background-color:#f9faf4;
}

Dans ce div Bas_de_page, je place un texte Texte1 défini par un span Style1 puis un autre texte Texte2 défini par un span Style2 :

<div id="Bas_de_page">

<span class="Style1>Texte1</span><span class="Style2">Texte2</span>

</div>

Comment faire pour que Texte2 s'affiche toujours à la même place à droite de Texte1, sur la même ligne que Texte1, indépendamment de la longueur de la chaîne Texte1 ? (Il peut ne pas y avoir de Texte1, Texte2 doit quand même s'afficher à la place qui lui est assignée.)

J'ai essayé moult combinaisons
position:relative/absolue,
float:left,
display:block/inline...

mais n'arrive pas à obtenir le résultat escompté.

Je me doute que la solution doit être simple, quand on la connaît.

Merci par avance

Modifié par cadbor (18 Jul 2009 - 01:00)

Bonjour,

Normalement en positionnant texte1 et texte 2 en absolu, tu ne devrais pas avoir de problème.

Bonjour Laurie-Anne

J'ai effectivement essayé en mettant Style1 et Style2 en position absolue.
J'ai aussi essayé les combinaisons display:block / display:inline pour les deux styles.

Texte2 se met toujours sous Texte1 et non sur la même ligne, à droite de Texte1. (De plus, le bloc Bas_de_page disparaît.)

A un moment, j'ai pu mettre les deux textes sur la même ligne (je ne me souviens plus comment, du fait de mes nombreux essais), mais Texte2 était affiché en début de ligne, à gauche de Texte1.

Merci de ta réponse
Modifié par cadbor (17 Jul 2009 - 10:58)

Essais avec :

#Bas_de_page .Style2 {
    float:right;
    margin-right:20px; // où 20px est le décalage sur la gauche pour positionner ton élement
}

Modifié par moust (17 Jul 2009 - 15:14)

Merci pour ta suggestion

Ce que tu proposes ne semble pas marcher, car elle ne permet pas a priori de maintenir les deux textes dans le même div.

Par contre, j'ai trouvé la solution, qui était dans l'ordre d'idée de ce que proposait Laurie-Anne (et de ce que j'essayais de faire) :

#Bas_de_page  {
position:absolute;
}

.Style1 {
display:inline;
}

.Style2 {
position:absolute;
display:inline;
left:400px;
}

Comme je le pensais, la solution est toute simple. Mis j'ai longuement tourné autour.

Merci de vos interventions