Les éléments sortent du flux lorsqu'ils sont positionnés en fixe, en absolu, ou lorsqu'ils sont flottants. Du moins c'est ainsi que l'on présente les choses en général. Il faudrait que je plonge dans la spécification CSS pour vérifier s'il n'y a pas quelque abus de langage là-dessous.
Ceci dit, cette question de vocabulaire est secondaire. Je voulais donc dire : laisser le second div en
float: none et
position: static (les valeurs par défaut).
Mais s'il y a cinq blocs à placer, ça ne se complique pas tant que ça. Ou disons que ça dépendra de ce que tu veux faire exactement.
Pour commencer et après vérification : pas de Three Pixel Jog entre flottants. Les deux seuls écueils d'IE à éviter seront donc :
- les problèmes d'arrondis des valeurs en pourcentages (si on met cinq blocs flottants en
width: 20%, de temps en temps le cinquième passera à la ligne...) ;
- les problèmes d'élargissement des blocs à cause de contenus, chaine de caractères ou images, trop larges pour le flottant (problème évité avec un
overflow: hidden, mais ça n'est pas toujours souhaitable...).
Pour cinq blocs en largeur 20%, tu peux faire quelque chose comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
div.float {
float: left;
width: 20%;
}
div.none {
margin-left: 80%;
}
</style>
</head>
<body>
<div class="float" style="background: mistyrose;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</div>
<div class="float" style="background: skyblue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</div>
<div class="float" style="background: yellow;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</div>
<div class="float" style="background: burlywood;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</div>
<div class="none" style="background: red;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</div>
</body>
</html>
Ou bien une variante (même code HTML) :
<style type="text/css">
div.float {
float: left;
width: 20%;
}
div.none {
overflow: auto;
}
</style>
<!--[if lte IE 6]><style type="text/css">
div.none {
overflow: visible;
height: 1%;
position: relative; left: -3px;
}
</style><![endif]-->
Par contre, dans ce cas on se retrouve avec un Three Pixel Jog bien plus visible (conséquence du HasLayout...).
