28172 sujets

CSS et mise en forme, CSS3

Adatper le conteneur au contenu

Bonjour à tous,

Je modifie actuellement le site de ma boite mais je bloque sur un point que je n'arrive pas à résoudre : j'aimerai adapter automatiquement le conteneur au contenu de ma page

Voici grossièrement le code que j'ai actuellement : 


body {
margin: 0;
padding: 0;
}

#global {
position:relative;
margin-left: auto; 
margin-right: auto; 
margin-top: 20px;  
margin-bottom: 10px;
width: 1000px;  
border:1px solid #CCCCCC;
background-color: #ffffff;

}
#contact {
position:absolute;
bottom: 0;
text-align: center;
padding-bottom: 10px;
}



<body>
<div id="global">
        <div>......</div>
        <div>......</div>
        <div><?php echo $texte ; ?></div> <!--insertion d'un texte de taille variable -->

<div id="contact">
        <div>......</div>
</div>
</div>
</body>


Vu que j'insère un texte de taille variable, j'aimerai que la taille de #global s'adapte au contenu. j'ai déjà essayé le paramètre "height" en auto ou 100% ou rien du tout mais rien y fait.

Merci de m'aider svp.
Modifié par Onizuka_88 (14 Oct 2009 - 20:15)
Hello Onizuka_88 et bienvenue, Smiley smile

Onizuka_88 a écrit :
j'aimerai adapter automatiquement le conteneur au contenu de ma page
A noter que c'est le comportement normal dès lors qu'on ne fixe pas de hauteur (height) aux éléments et qu'on ne les sort pas du flux (typiquement avec des flottants ou en utilisant le positionnement absolu).

Je ne vois pas bien ce que tu veux faire ni si c'est bien utile de positionner #contact puisque par défaut il se serait déjà positionné en bas (il manque peut-être simplement un margin-top ?) mais en tout cas le padding-bottom devrait plutôt être affecté à #global et tant qu'à faire il faudrait utiliser une unité relative telle que em ou % pour que ce padding s'agrandisse en même temps que la taille du texte. Par exemple :
#global {
	...
	padding-bottom: 1em;
}

Modifié par Heyoan (14 Oct 2009 - 20:36)
a écrit :
A noter que c'est le comportement normal dès lors qu'on ne fixe pas de hauteur (height) aux éléments et qu'on ne les sort pas du flux (typiquement avec des flottants ou en utilisant le positionnement absolu).


Le problème est surement la. Les éléments à l'intérieur de #global sont codé en absolu et ca va être de faire sans. c'est pour cette raison que j'ai utilisé en supplément "#contact"

Y a t'il d'autre solution?
Sujet clos
Aller à