2 pièce(s) jointe(s)
overflow:hidden et float avec Chrome et safari
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:
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:
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:
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.
