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.

**Bisûnûrs** · 04/05/2011, 12h13

Tu peux sortir le bloc2 du flux :

Code :

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

1
2
3
4
5
#bloc2 {
  [...]
  position : absolute;
  left : -999em;
}

**tom42** · 04/05/2011, 13h19

Merci pour ta réponse.

Mon but est d'animer l'ensemble par javascript en jouant sur la largeur du bloc 2.
J'ai simplifié au max pour la compréhension du problème mais dans mon cas il y a beaucoup plus d'enfant dans le bloc "container".
En le laissant dans le flux, tous les fils du bloc conteneur restent en fer à droite (A condition que la largeur du bloc parent s'adapte à son contenu).

**Bisûnûrs** · 04/05/2011, 14h10

Tu peux le sortir du flux quand tu veux une largeur équivalente à 0 et le remettre dès que tu c'est supérieur à 0. A partir de 1px Chrome réagit "normalement".

**tom42** · 04/05/2011, 15h53

Bien vu, je n'avais pas remarqué qu'à partir d'un 1px le comportement était normal.
Avec ceci je vais facilement pouvoir m'en sortir.

Merci beaucoup pour le coup de main.

overflow:hidden et float avec Chrome et safari

CSS

Vue hybride

Discussions similaires

Partager

Partager