2 colonnes avec CSS et "float:right"

Tout d'abord je tiens à préciser que faire une présentation sur plusieurs colonnes avec les feuilles de style CSS n'est pas toujours simple, et n'est pas une science exacte car les différents navigateurs n'affichent pas toujours les choses de la manière voulue !

Les gens qui dénigrent les tableaux utilisés pour la présentation, en promouvant les avantages des feuilles de style CSS omettent de dire cela !

Exemple de tableau à 2 colonnes en utilisant float:right;

Le code HTML et CSS

<div id="container">
<div class="right">
	une deuxième une deuxième une deuxième
</div>
<div class="left">
	une case
</div>
<div class="right">
	une deuxième case
</div>
<div class="left">
	une case
</div>
texte qui est dans le conteneur "container"
</div>

#container {
width:400px;
background-color:#D9D5BF;
}

.left {
height:100px;
width:100px;
border-style:solid;
border-width:1px;
border-color:black;
text-align:center;
}
.right {
height:100px;
width:100px;
border-style:solid;
border-width:1px;
border-color:green;
text-align:center;
float:right;
}

Commentaires

Largeur des cases

La largeur des blocs n'est pas calculée de la même manière avec Mozilla ou Internet Explorer :

• avec Mozilla : la largeur du bloc div sera égale à : width + 2 * padding + 2 * border-width.
• avec Internet Explorer : la largeur du bloc div sera égale à : width.

Dépassement du texte hors de la case

Si le texte dépasse du bloc, Internet Explorer et Mozilla se comportent de manière différente :

• Mozilla affiche le texte qui dépasse, mais considère que la taille du bloc est celle indiquée par width et height (s'il y a un cadre, le texte dépasse du cadre).
• Internet Explorer agrandit le bloc, pour tout contenir (s'il y a un cadre, le cadre est agrandit, et le texte reste donc à l'intérieur du cadre).

Exemple (visionner avec les 2 navigateurs Internet Explorer et Mozilla pour voir la différence) :

Ordre d'apparition des bloc "div" dans le HTML

Si le bloc "right" qui est "float" est écrit après l'autre bloc ("left") dans le HTML, alors l'affichage se fait de la manière suivante :

Conclusion : pour faire une apparence de 2 colonnes, il faut d'abord écrire le bloc "float" dans le HTML, et ensuite l'autre bloc.