Retour à la ligne inopportune d'un bloc flottant avec firefox

Aligner deux blocs avec float: left;
Bloc 1 a une longueur fixe, bloc 2 a une longueur variable.

CSS :

.bloc1 {
background-color: blue;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
float: left;
margin-left: 20px;
}

HTML

<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli </div>

L'affichage est correct sous les deux navigateurs, mais si le texte du bloc 2 se rallonge au bout d'un moment, avec firefox, le bloc 2 va passer sous le bloc 1 malgré l'instruction float, tandis que sous IE l'affichage des blocs sur la même ligne demeure.



Comment puis-je avoir un affichage sur une même ligne avec Firefox en
conservant une longueur variable pour le bloc 2 (à droite) et sans fixer sa position de façon absolue ?
Modifié par NICSS (20 Feb 2007 - 18:29)

Bonjour, je suis confronté exactement au même problème, j'ai beau fouiller le web, je ne trouve pas de solution...

Au secours !

Merci à ceux qui savent de nous faire partager leur savoir...

Salut,

Peut-être en ajoutant un "bloc de dégagement"...???

<div id="degagement"> </div>

#degagement
{
clear: both;
}

@++
Modifié par Tony_M (22 Feb 2007 - 14:04)

Salut,

je viens d'essayer ta proposition mais ça ne résoud pas le problème.
merci quand même.

D'autres propositions ?

++

Ah tiens, un joli bug d'Internet Explorer (le comportement de Firefox étant le comportement attendu).

Petite question : pourquoi aurait-on besoin de faire flotter le deuxième bloc ? Un seul élément flottant suffit à mettre « côte-à-côte » deux blocs.

.bloc1 {
	background-color: blue;
	width: 100px;
	float: left;
}
.bloc2 {
	background-color: green;
	margin-left: 120px;
}

On peut aussi utiliser un contexte de formatage (par exemple avec un overflow: auto sur div.bloc2 afin de l'empêcher de passer sous les flottant, à la place d'une marge à gauche.

{
	background-color: green;
	margin-left: 20px;
	overflow: auto;
}

Mais ça demandera un correctif pour IE6 et inférieurs (via commentaires conditionnels).

Salut,

Je viens de trouver la solution et puis j'ai lu ta proposition... C'est la même !!

En effet il faut replacer le deuxième bloc dans le flux courant (donc supprimer le float: left) puis définir une marge de gauche de la taille du premier bloc. Reste à tester sous ie6 par contre...

Merci !!

syl20_44 a écrit :
Reste à tester sous ie6 par contre...

Et à marquer le sujet comme [Résolu]

a écrit :
Et à marquer le sujet comme [Résolu]

En effet cher admin... avis à celui qui a lancé le topic...
Modifié par syl20_44 (22 Feb 2007 - 19:52)