Problème avec une colonne en CSS

Résolu/Fermé
Profil bloqué - Modifié par Th3tagg3r le 15/12/2010 à 22:46
 Profil bloqué - 16 déc. 2010 à 09:38
Bonjour,

Je suis face à un problème que je n'arrive pas à régler seul depuis pas mal de temps, étant débutant en CSS.
Je vous explique : J'ai une colonne "sidebar" à gauche de ma page qui contient mon menu et d'autres informations, elle est contenue dans un div "container".
Je voulais quelle fasse toute la longueur de mon "container" et quelle s'arrète juste avant mon pied de page "footer" qui n'est pas contenu dans mon "container". Je vous montre :

mon conteneur :

#container {  
width: 900px;   
padding: 0 10px;   
margin: 0 auto;   
margin-top:25px;   
position: relative;   
}  


Ma colonne :

#sidebar {  
float: left;  
width:180px;    
position:absolute;   
height:100%;    
border-right: 1px solid white;  
}  


Et ici, je defini "height:100%;" pour que ma colonne qui est bien contenue dans "container" fasse toute la hauteur du conteneur.
Hors elle fait toute la longueur de la page (elle déborde jusque sur mon "footer) ! Et cela ne vient pas de mon xhtml, je l'ai retourné des dizaines de fois, la colonne est bien dans mon conteneur, elle devrait donc faire tout la hauteur de mon conteneur ! Je ne comprend pas.



Mon pied de page :

#footer {  
background: url('images/footer.png') no-repeat center bottom;   
width:900px;   
height:60px;  
overflow:hidden;   
margin: 0 auto;  
}  


Merci pour votre aide.
Cordialement,
Th3 Tagg3r

A voir également:

2 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 déc. 2010 à 01:45
Une technique consiste a appliquer un background au div container pour simuler un colonne de même hauteur que la partie contenu.

Exemple sur ce gabarit: http://www.alsacreations.com/static/gabarits/modele05.html
Exemple sur un design de ma création: http://arthezius.fr/designs/8/
0
Profil bloqué
16 déc. 2010 à 09:38
Effectivement je n'y avait pas pensé, je te remercie je vais donc ajouter ceci à mon background.
Merci encore.
0