28172 sujets

CSS et mise en forme, CSS3

Float:right et largeur de div adaptée au contenu: Est-ce possible??

Bonjour,
Mon code:
<div id="conteneur">
   <div id = "divflottante" style="width:50px; height:50px; float:left"></div>
   Une ligne de texte<br />
   Une ligne de texte<br />
   Une ligne de texte
</div>

Jusque là tout va bien, j'obtiens divflottante à gauche et 3 lignes de texte à droite de la divflottante.
PROBLEME:
Je mets le conteneur en float:right; sans spécifier sa largeur
Dans IE7 tout va bien, la largeur du conteneur s'adapte bien à la longueur de la ligne la plus longue.
Dans Chrome rien ne va plus, la largeur du conteneur ne s'adapte pas à la largeur du texte. Elle prend une valeur qui semble quelconque et des sauts de ligne indésirés apparaissent.

J'ai tout essayé, des dispaly:table pour le conteneur, des display:block pour le texte, et pas mal d'autres choses. Rien n'y fait, sauf bien sûr de spécifier une largeur pour le conteneur, ce que je voudrais éviter.

La seule solution que je vois serait d'adapter une largeur du conteneur calculée avec un peu de php, mais cela me parait un peu lourd, non?

Une idée??
Modifié par g2alsacreation (26 Jun 2011 - 23:55)
Salut,

J'ai du mal à saisir car ton explication est confuse et ne renseigne pas vraiment sur ce qui est recherché (conteneur flottant ??). Aurais tu une page en ligne, et/ou un schéma de ce que tu vises à faire ? Smiley cligne
Mikachu a écrit :
Salut,

J'ai du mal à saisir car ton explication est confuse et ne renseigne pas vraiment sur ce qui est recherché (conteneur flottant ??). Aurais tu une page en ligne, et/ou un schéma de ce que tu vises à faire ? Smiley cligne


Tu as raison, mon explication n'est pas très claire.
Entre temps je pense avoir résolu le problème.


Voir code ci-dessous. avec les différentes étapes pour arriver à une solution qui marche sous IE, FF et Chrome. .
<html>
<style type="text/css">
.conteneur{
	background:#DDD;
	width:800px;
}
.divadroite{
	border:1px solid red;
	float:right
}
.divagauche{
	float:left;
	background:yellow;
	width:50px; 
	height:50px;
	margin-right:10px;
}	
</style>
<body>
<div  class="conteneur">
	<div class="divadroite">
		OK dans IE7<br/>
		Largeur OK dans Chrome bla bla bla bla
	</div>
	<div style="clear:both"></div>
	
	<div class="divadroite">
		<div class="divagauche"></div>
		OK dans IE7<br/>
		Largeur PAS OK dans Chrome bla bla bla bla
	</div>
	<div style="clear:both"></div>

	<div class="divadroite">
		<div class="divagauche"></div>
		<div >
			OK dans IE7<br/>
			Largeur PAS OK dans Chrome bla bla bla bla
		</div>
	</div>
	<div style="clear:both"></div>
	
	<div class="divadroite">
		<div class="divagauche"></div>
		<div style="float:right;">
			Pas OK dans IE7<br/>
			Largeur OK dans Chrome bla bla bla bla
		</div>
	</div>
	<div style="clear:both"></div>
	
	<div class="divadroite">
		<div class="divagauche"></div>
		<div style="float:right;!float:none;">
			OK dans IE7<br/>
			Largeur OK dans Chrome bla bla bla bla,<br/>
			Ouf, et ça marche aussi dans FF!
		</div>
	</div>
	<div style="clear:both"></div>
	
</div>	
</body>
</html>
Bonjour,

C'est moi ou il n'y a pas de Doctype dans ce code HTML? Smiley sweatdrop
(Attention, l'absence de Doctype est puni de 10 coups de fouet et 40 coups de bâton.)

Autre chose, on conseille en général d'éviter les noms de classe tels que "divagauche". D'une, tu n'es pas sûr de garder un DIV pour ce conteneur, et de deux tu n'es pas sûr de le garder à gauche. Le jour où tu auras changé l'élément pour un BLOCKQUOTE et le positionnement pour placer cet élément à droite, le nom de classe "divagauche" va pas être super pratique pour relire ton code. Smiley cligne

Enfin, sur le fond: si ton conteneur est flottant, il va s'adapter à la largeur de son contenu le plus large: image, bloc de dimensions fixe, ligne de texte non interrompue par un retour à la ligne forcé, etc. J'ai fait un test rapide avec un paragraphe avec des BR, et le flottant prend la largeur de la plus longue ligne de texte. Mais quand on essaie de caser un flottant en plus de ces lignes de texte, ça peut donner des résultats assez aléatoires (enfin, pas aléatoires mais difficiles à controler).
Une astuce qui semble marcher plutôt bien: attribuer un padding-left conséquent à ton conteneur, et placer ton élément de gauche à l'intérieur de ce padding (en utilisant soit du positionnement absolu, soit un float:left + une marge négative).

upload/2043-1309191945.png
Modifié par fvsch (27 Jun 2011 - 18:41)
Merci fvsch pour cette astuce quand même plus orthodoxe que la mienne, j'aurais du y penser tout seul.

"Doctype" et "divagauche"? Oui je sais, j'ai fait vite et simpliste pour expliquer mon problème, ce n'est pas ma page réelle. Heureusement, parce que la punition annoncée ne donne pas trop envie de rigoler!

Sujet clos pour moi
Modifié par g2alsacreation (27 Jun 2011 - 21:38)
Sujet clos
Aller à