28172 sujets

CSS et mise en forme, CSS3

Textes de gauche et de droite qui se superposent

Bonjour à tous. C'est mon premier message sur ce forum.
Mon problème est le suivant : J'ai une boîte contenant un texte aligné sur le bord gauche, et un autre aligné sur le bord droit, sur la même ligne. Etant donné qu'il s'agit d'un site spécialement conçu pour mobile, le contenu doit rester correct lorsque la fenêtre du navigateur est réduite à sa largeur minimum. L'ennui, c'est que dans ce cas, je ne parviens pas à afficher correctement ma boîte.

Si j'utilise float:right pour gérer mon alignement à droite, alors le texte de droite passe sur la ligne d'en-dessous (ça c'est bien), mais la boîte n'est pas agrandie (c'est pas bien).

Si j'utilise position:absolute;right:0px à la place, alors mon texte de droite se superpose au texte de gauche

Le résultat souhaité est : le texte de droite passe une ligne en-dessous (comme dans le cas 1), mais la boîte doit du coup s'agrandir pour contenir l'ensemble.

Voici un bout de code qui illustre très bien le problème. Vous pouvez le copier tel quel dans un fichier .html pour voir le résultat, et réduire au maximum la largeur de votre navigateur :


<html>
<head>
<style>
.boite {
	background-color: #b0b0b0;
	position: relative;
}

.droite1 {
	float: right;
}

.droite2 {
	position: absolute;
	right: 0px;
}
</style>
</head>
<body>

<div class="boite">
	<span class="gauche">ceci est un texte placé à gauche</span>
	<span class="droite1">texte à droite avec un float right</span>
</div>

<br />
<br />

<div class="boite">
	<span class="gauche">ceci est un texte placé à gauche</span>
	<span class="droite2">texte à droite avec une position absolue</span>
</div>

</body>
</html>


J'ai testé sur Firefox et Safari, et j'obtiens la même chose. IE donne un résultat pire que les autres, mais il n'entre pas dans la liste des navigateurs cibles.

Est-ce que quelqu'un aurait une idée?
Salut,
je suis pas sûr que c'est le résultat que tu veux mais essaie ça


<style type="text/css">
.boite { 
    background-color: #b0b0b0; 
    position: relative; 
} 
 
.droite1 { 
    float: right; 
} 
 
.gauche { 
	 float:left;
} 
</style> 
</head>

<body>
<div class="boite"> 
    <span class="gauche">ceci est un texte placé à gauche</span> 
    <span class="droite1">texte à droite avec un float right</span> 
    <div style="clear:both;"></div>
</div> 
 
<br /> 
<br /> 
 
<div class="boite"> 
    <span class="gauche">ceci est un texte placé à gauche</span> 
    <span class="droite1">texte à droite avec une position absolue</span> 
    <div style="clear:both;"></div>
</div>
Sujet clos
Aller à