PB - Background ne prend pas toute la hauteur.

Bonjour,

Je suis assez embarrassé avec une hauteur en 100% :

J'ai créée un div global qui contient un div "left (censé se répéter) " et un div "right"
Le div left se trouve en absolu avec height 100% => Il se colle bien au bas de page.
Le soucis arrive quand dans mon div "right" je place un contenu trop grand, le "left" ne s'étend plus jusqu'au bas de page.

quelqu'un pourrait m'aider plz ?


Merci d'avance

- http://ns38115.ovh.net/~lesloges/localisation.php

Code html :

<div id="global">
    
    	
        
    <div id="bg_left"></div>
    
        <div id="header">
        	<div id="banner"></div>
        </div>
        
        
        <div id="bg_menu">
        	
            <ul class="menu">
                <li><a class="menu_acc" href="index.php"><b>Accueil</b></a></li>
                <li><a class="menu_tar" href="tarifs.php"><b>Tarifs &amp; r&eacute;servations</b></a></li>
                <li><a class="menu_con" href="confort.php"><b>Confort</b></a></li>
                <li><a class="menu_gal" href="galerie.php"><b>Galerie</b></a></li>
                <li class="current"><a class="menu_loc" href="localisation.php"><b>Localisation</b></a></li>
            </ul>
        </div> <!-- Fin bg_menu -->
        
        
		<div id="left">
        
        	<div id="menusec">
            
            	<ul>
                    <li><img alt="" src="images/puces.gif" /><a href="offres.php"><b>Offres sp&eacute;ciales</b></a></li>
                    <li><img alt="" src="images/puces.gif" /><a href="loisirs.php"><b>Loisirs</b></a></li>
                    <li><img alt="" src="images/puces.gif" /><a href="contact.php"><b>Contact</b></a></li>
                </ul>
            </div> <!-- Fin Menusec -->
            
            <div id="newsletter">
            
            	<img alt="Newsletter" src="images/newsletter.jpg" />
                
                <form id="news" method="post" action="#">
                	<input class="news_input" type="text" name="frm_email" size="26" value="Inscrivez-vous" onFocus="this.value=''" /> 
                	<input class="news_submit" type="submit" value="" />
                </form>
                
                <img alt="Les loges" src="images/news_loges.gif" />
                
                <p id="news_p">Rue du Th&eacute;atre, 26b
                <br />5000 Namur
                <br />T&eacute;l : 02 346 68 29</p>
            </div> <!-- Fin newsletter -->
        </div> <!-- Fin left -->
        
        
        <div id="right"> 
        
        	<div id="right_loc">
            	<img alt="Plan de Namur" src="img/plan_bel.jpg"  />  <br /><br />
            	<img alt="Plan de Namur" src="img/plan_nam.jpg"  />            </div>       
        
        </div> <!-- Fin right -->

        
    </div> <!-- Fin global -->

Code CSS :

* {
	padding:0;
	margin:0;
}

html,body {
	background-image: url(../images/head_bg.gif);
	background-repeat:repeat-x;
	background-color:#FFFFFF;
	height:100%;
}

#global {
	width:955px;
	height:100%;
	background-color:#00FF33;
	min-height: 100%;
	margin:0 auto;
}

#bg_left {
	position:absolute;
	background-color:#2d2c2a;
	width:245px;
	height:100%;
	min-height: 100%;
	top:0;
	bottom:0;
}

#header {
	position:relative;
	background-image:url(../images/logo.jpg);
	background-repeat:no-repeat;
	width:955px;
	height:120px;
}

#banner {
	position:relative;
	background-image:url(../images/ban.jpg);
	background-repeat:no-repeat;
	width:705px;
	height:120px;
	left:245px;
}

#bg_menu {
	position:relative;
	background-image:url(../images/bg_head_menu.gif);
	background-repeat:repeat-x;
	width:705px;
	height:55px;
	padding-left:245px;
}

#left {
	float:left;
	width:245px;
	padding:0;
}

#right {
	float:right;
	width:675px;
	margin-top:25px;
	margin-right:5px;
	padding:0;
	padding-right:5px;
}

#spacer {
	clear:both;
}

Salut,
J'ai le même problème que toi, donc si tu trouves une solution ça serait sympa de la mettre ici

Merci pour ta réponse,
J'ai été voir sur les sites mais par exemple sur pompage la technique est pour ainsi dire la même que la mienne
appart que j'ai créé un div en plus rien que pour la colonne mais le problème reste le même.

Donc j'en arrive au 2ème lien qui est enfait bien mon problème (vu qu'une fois que le contenu dépasse mon image ne continue pas) mais
ils ne donnent pas de réels trucs pour s'en tirer ...

Le 3ème lien j'étais déjà aller voir malheureusement la technique ne fonctionne qu'en ajoutant un footer , je n'en ai pas et j'avais déjà
testé cette technique mais IE6 comme toujours foire ...


Sniff

Leeroy_05 a écrit :
mais par exemple sur pompage la technique est pour ainsi dire la même que la mienne appart que j'ai créé un div en plus rien que pour la colonne

D'où le fait que ça ne soit pas la même technique.

Leeroy_05 a écrit :
mais le problème reste le même.

Non. Je t'invite à relire l'article sur Pompage.net.

Leeroy_05 a écrit :
Donc j'en arrive au 2ème lien qui est enfait bien mon problème

Heu... non, ça ne correspond pas à ton problème. Je l'indiquais juste parce que dans la mesure où tu utilises la technique des colonnes factices, et dans le cas où tu aurais des éléments flottants, tu peux rencontrer un problème de dépassement des flottants.

Leeroy_05 a écrit :
Le 3ème lien j'étais déjà aller voir malheureusement la technique ne fonctionne qu'en ajoutant un footer

Faux. Et ça marche sur IE6 moyennant certaines adaptations indiquées dans le tutoriel.

Je suis désolé de te dire ça, mais là tu es un peu dans les choux. Peut-être faudrait-il opter pour un design plus simple à intégrer ou faire appel à un professionnel (de l'intégration, s'entend)? Ou bien reprendre les bases du positionnement CSS, relire les tutoriels, faire des essais qui ne correspondent pas forcément au design à intégrer mais qui permettront d'appréhender certaines subtilités avec les idées claires... bref, prendre son mal en patience et se former.
Modifié par Florent V. (04 Mar 2008 - 12:40)