Discussion :

[Arnaud F.]

Bonjour,

j'ai le schéma suivant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div>
	<div id='gauche' class='fils'>gauche</div>
	<div id='droite' class='fils'>droite</div>
</div>

J'aimerai que les div gauche et droite soient l'une a côté de l'autre.

J'ai tenté la propriété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.fils {
	display: inline-block;
	width: 50px;
}

Ce code fonctionne parfaitement sous Chrome, mais aucunement sur IE6, hors ça doit fonctionner sur IE6 (en priorité).

Une idée de comment je dois m'y prendre?

[ThomasR]

Bonjour,

Voici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<div class="clear">
	<div id="gauche" class="fils">gauche</div>
	<div id="droite" class="fils">droite</div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.clear:after {content:".";display:block;clear:both;height:0;visibility:hidden;}
.fils {float:left;width:50%;}

Pour IE6, la classe clear :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
* html .clear {display:inline-block;} /*IE6*/
/* Hide from IE Mac \*/ 
* html . clear {display:block;} /*IE6*/
/* End hide from IE Mac */ 
/*\*/* html . clear {height: 1%;} /*IE6*/

Pour IE7 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.clear {display:inline-block;} /*IE7*/
.clear {display:block;} /*IE7*/

La classe .clear permet de palier au fait que les éléments flottants n'ont pas de hauteur.

[Macmillenium]

La classe .clear permet de palier au fait que les éléments flottants n'ont pas de hauteur.

Il suffit de conférer un nouveau contexte de formatage à .clear :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.clear {
   overflow:hidden;
}

+ Conférer le Layout sous IE6 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<!--[if lte IE 6]>
<style type="text/css" media="screen">
 .clear {
    zoom:1;
    overflow:visible /* remise à la valeur initiale si nécessaire */
 }
</style>
<![endif]-->

FAQ : Comment faire pour qu'un conteneur englobe ses enfants flottants ?