overflow:hidden et float avec Chrome et safari

**tom42** · 04/05/2011, 11h02

Bonjour à tous,

Je rencontre un problème avec le overflow:hidden combiné à des positionnements en float avec les navigateurs chrome et safari.

Voici le code :
HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<body>
    <div id="page">
        <div id="container">
            <div id="bloc1"></div>
                <div id="bloc2">
		    <p>Lorem ipsum</p>
                </div>
            <div style="clear:both;"></div>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>

Les div en clear:both sont juste là pour que l'on puisse voir les blocs conteneur.
CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#page{
    width: 200px;
    background-color: #f0f0f0;
}
#container{
    float: right;
    background-color: blue;
}
#bloc1, #bloc2{
    height: 50px;
    float: left;
}
#bloc1{
    width: 50px;
    background-color: red;
}
#bloc2{
    background-color: green;
    height: 50px;
    color:white;
}

Ceci donne sous chrome : image1.jpg (en PJ)

Jusqu'ici tout va bien, le bloc "container" et bien positionné à droite de la page (en gris), sa largeur vaut exactement la somme de ses 2 blocs fils et ceux ci sont bien côte à côte.

Maintenant je souhaite cacher le bloc2 (en vert) en mettant sa largeur à 0.
(Je n'utilise pas display:none car mon but est de réaliser une animation, je ne présente ici qu'un exemple simplifié)
Je pensais donc qu'en ajoutant "overflow:hidden;" et "width:0px;" sur le bloc2 (en vert), il allait disparaitre et que la largeur du bloc conteneur (en bleu) allait s'adapter.
Or avec chrome et safari ce n'est pas le cas :

CSS

Code :

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

1
2
3
4
5
6
7
8
 
#bloc2{
    background-color: green;
    height: 50px;
    color:white;
    overflow: hidden;
    width:0px;
}

Ceci donne sous chrome : image2.jpg (en PJ)

Je voudrais finalement que le bloc1 (en rouge) soit aligné à droite et que la largeur du bloc conteneur (en bleu) s'adapte à ses fils.

En regardant les tailles calculées par le navigateur, on voit que le bloc2 (en vert) ainsi que la balise <p> ont une largeur de 0. En revanche la largeur du bloc conteneur (en bleu) est restée la même.

Avez-vous une idée pour forcer la largeur du conteneur à s'ajuster à la taille de ses fils ?

Merci d'avance et n’hésitez pas à me demander des compléments si je n’ai pas été clair.

P.S. Tout ceci fonctionne bien avec FF, opera et IE.

overflow:hidden et float avec Chrome et safari

CSS

Mode arborescent

Discussions similaires

Partager

Partager