28173 sujets

CSS et mise en forme, CSS3

[résolu] Fond de bloc non extensible automatiquement

Bonjour, j'ai un petit souci sous Firefox (quand c'est pas l'un c'est l'autre)
http://img223.imageshack.us/img223/1193/sanstitre2up8.png

explication:
http://img84.imageshack.us/img84/7995/sanstitre1ap4.png
bloc rouge: div conteneur
blocs bleus: 3 divs avec images de fond
blocs verts: 2 div en float left et right pour séprarer contenu et menu
bloc violets: à gauche un bloc titre et un bloc contenu, à droite: ma liste de menu.

le souci c'est que le fond du bloc bleu du milieu prend la hauteur de son "min-height" mais uniquement sur FF, dans IE, il s'adapte automatiquement. J'ai bien mis un height à 100% mais dans FF toujours le même souci. Bref je ne comprend pas pourquoi le fond s'arrête en plein milieu
Modifié par r4z (06 Dec 2006 - 14:35)
le code :


// bloc conteneur rouge
#conteneurmid{
overflow: auto;
width:790px;
}

#gauche{
float:left;
width:595px;
height:100%;
}
#droit{
float:right;
width:195px;
height:100%;
}
//bloc titre violet de gauche
#titremid{
padding:5px 15px;
margin:0;
}
//bloc contenu violet de gauche
#contenumid{
margin:0;
padding:20px;
}


// les blocs bleus
#midtop{
background:url(img/midtop.png) no-repeat left bottom;
height:15px;
}
#midmid{
background:url(img/midmid.png) repeat-y;
min-height:150px;
height:100%;
}
#midbas{
background:url(img/midbas.png) no-repeat left top;
height:15px;
}




HTML:
	<div id="conteneurmid">
		<div id="midtop"></div>
		<div id="midmid">
			<div id="gauche">
				<div id="titremid">Qui sommes nous ?</div>
				<div id="contenumid">bla<br />blablabla<br />blabla<br />blzdsv</div>
			</div>
			<div id="droit">
				<ul id="menu2">
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
					<li><a href="#">Menu</a></li>
				</ul>			
			</div>
		</div>
		<div id="midbas"></div>
	</div>
Hello,

j'arrive pas à recréer ton bug ...
essay avec un petit <hr /> en plus :
<div id="conteneurmid">
      <div id="midtop"></div>
        <div id="midmid">
          <div id="gauche">
            <div id="titremid">Qui sommes nous ?</div>
            <div id="contenumid">bla<br />blablabla<br />blabla<br />blzdsv</div>
          </div>
          <div id="droit">
            <ul id="menu2">
              <li><a href="#">Menu</a></li>
              <li><a href="#">Menu</a></li>
              <li><a href="#">Menu</a></li>
            </ul>			
          </div>
        <hr />
        </div>
      <div id="midbas"></div>
    </div>

et
hr{
        clear:both;
        visibility:hidden;height:0;
      }


Sinon tu peux nous filer le code complet dans une seul page (DOCTYPE +style + html) et joindre tes images si possible ?

Merci
j'ai réussi a trouver une solution en rajoutant 

#midmid:after {
content: "";
display: block;
clear: both;
}


ça passe dans IE et dans FF donc ça devrait être bon. Merci
Oui ok .. mon truc aurait du marcher aussi .. comme tes block #droit et #gauche sont en float, ils sortent du flux de la page et donc leur hauteur n'est pas "detectée" par la boite qui les contient.
Sujet clos
Aller à