bloc parent sans image de fond ! css && firefox

[Invité navidof]

Bonjour, voilà je suis entrain de monter un site et je suis confronté à un bug? de firefox !

 

grossièrement, j'ai :

 

<div id="haut"></div>

<div id="milieu">
      <div id="milieu_gauche">du texte ici</div>
      <div id="milieu_droit">encore du texte</div>
</div>

<div id="bas"></div>

 

J'ai donc trois gros blocs les uns en dessous des autres (haut, milieu et bas) qui possèdent chacun une image de fond (par css).

 

Le bloc du haut et le bloc du bas sont à largeur et hauteur déterminés (en pixels)

le bloc du milieu n'a que sa largeur de fixée, la hauteur devant s'adapter en fonction de la taille des sous blocs qu'il contient.

 

Les 2 sous-blocs à l'intérieur du bloc du milieu sont disposés en colonnes (float:left;) et seul leur largeur est définie dans le css, la hauteur le sera de part leur contenu.

 

Sous IE, aucun soucis, le gros bloc du milieu s'adapte parfaitement à la taille des 2 sous blocs qu'il contient, et l'image de fond de "milieu" s'affiche correctement.

 

Sous FF, le bloc du milieu est considéré comme ayant une hauteur nulle, et son image de fond ne s'affiche pas !

 

En rajoutant

#milieu{
   min-height=600px;
   background-image:url("images/milieu_fond.jpg");
   background-repeat:repeat;
}

, l'image de fond s'affiche, mais dès qu'on dépasse les 600 px au niveau du contenu des sous blocs, l'image est tronquée : la partie qui dépasse n'a plus d'image de fond alors !

 

Quelqu'un a t'il la solution à ce problème ?

merci d'avance !

[KewlCat]

Le deux blocs milieu_droite et milieu_gauche étant en float ils sortent du flot "normal" du document et par conséquent ton bloc milieu n'a plus de contenu. C'est pour cela que sa hauteur ne "s'adapte" pas...

Il n'y a pas de solution miracle, pas de technique qui fonctionne à merveille toujours et pour tous. Si tu veux que le conteneur s'adapte à la taille du contenu, il faut enlever l'attribut float à l'un de tes blocs... Ou sinon, il faut mettre l'image de fond ailleurs que sur "milieu", et jouer éventuellement avec overflow pour que rien ne déborde...

[Invité navidof]

Salut KewlCat,

 

Tu m'as devancé ! j'allai donner une réponse, j'ai trouvé une solution juste après avoir posté

 

Cette solution est toutefois particulièrement illogique, en mettant :

#milieu{
background-image:url("images/milieu_fond.jpg");
background-repeat:repeat;
overflow:hidden;
}

 

et bien l'image de fond s'affiche parfaitement !

 

Qui se lance dans une explication ?

Parce que si je me trompe pas, overflow:hidden, ça veut bien dire n'affiche pas tout ce qui dépasse du bloc, non ? et pour une hauteur de bloc nulle, y'a beaucoup de choses qui dépassent en général...

[Dylav]

1. Si on enlève l'attribut float:left de la colonne de droite, son contenu passe sous le contenu de la colonne de gauche ?

 

2. Si on remplace le bloc div de gauche par un bloc inline span float:left et que le reste du bloc milieu sert de colonne de droite, l'image de fond du bloc milieu apparaît effectivement mais, pour Firefox, se limite à la hauteur de cette “colonne” de droite (et s'y arrête donc, même si la colonne de gauche est plus haute). Cette solution n'est donc pas totalement satisfaisante.

 

<div id="haut"></div>
<div id="milieu">
 <span id="milieu_gauche">texte colonne de gauche</span>
 texte colonne de droite
</div>
<div id="bas"></div>

3. Il est vrai qu'ajouter l'attribut overflow:hidden semble aberrant. Mais ta solution devient un peu plus logique (quoique) si tu le remplaces par overflow:auto, qui fonctionne aussi bien ! Ça marche aussi avec le span...