Discussion :

[guy2004]

Bonjour,
J'ai un div qui contient le texte de la page qui se creé dynamiquement. Je suis obligé de lui donner une hauteur explicite sinon si je mets "auto" ou "inherit" il se termine juste sous le texte si y a 1 ligne par exemple c'est pas jolie.
Mais si je mets un texte qui depasse la hauteur donnée, alors mon "footer" (qui vient a la suite du div) se place sous le div et le texte descend par dessus....bref
Quelqu'un voit se que je veux dire ?
Merci pour votre aide

[Linaa]

J'ai dejà été confronté à ce problème, que j'ai résolu en mettant

Dans le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#vide {
    clear:both;
}

Et le html (à mettre à la fin du conteneur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="vide"></div>

[guy2004]

Salut, tu pourrais m'expliquer un bon plus ce que ca fait histoire que je comprenne ? merci

[Linaa]

Et si tu montrais un peu ton code ou un exemple plutot ?

[guy2004]

Ok je te mets dans l'ordre d'imbrication :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div#container {height: inherit; width: 977px; margin-top: 0; margin-bottom: auto; margin-left: auto; margin-right: auto; padding: 0; border: 5px #FFFF99; background: white;}
 
div#main {  height:1000px; margin: 0; position:relative; padding-top: 10px; padding-left: 10px; margin-right: 230px;  color: black; background: url(images/square_map.gif) 50% 100% no-repeat white; border-left: 2px solid #376B9D; font-family:Georgia, Arial, Helvetica, sans-serif; font-size: 14px;}

L'architecture c'est comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="container">
 
<div id="main"></div>
</div>

[Nicolas.Cogi]

le position: relative fait que ton div sort du flow et s'affiche sans influer sur le positionnement des autres elements. Si tu enleves cette declaration , le <div id="container"> s'agrandira pour contenir integralement le <div id="main"> et tout le reste du contenu.

[guy2004]

si je fais cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div#main { margin: 0;  padding-top: 10px; padding-left: 10px; padding-right: 10px;color: black;   }

alors ma page devient vide s'il n'y a plus de texte !

[Linaa]

Essaies ça

Pour le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#vide {
    clear:both;
}

Le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="container">
   le conteneur
   <div id="main">le main</div>
   <div id="vide"></div>
</div>

(Sans rien ajouter entre les balise <div id="vide"> et </div>)

[guy2004]

Non ca change rien.
Moi je veuxx juste que la hauteur de ma page s'adapte aux contenu texte, et que s'il n'y a pas de contenu que la hauteur ne soit pas nulle.

[Linaa]

Moi je veuxx juste que la hauteur de ma page s'adapte aux contenu texte

Le code que je t'ai mis juste au dessus permet d'adapter la hauteur du div selon ton contenu (texte)

s'il n'y a pas de contenu que la hauteur ne soit pas nulle

Tu peux spécifier un min-height à ton conteneur (mais de fonctionne que pour IE, on doit rajouter un p'tit ...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	_height:200px; /* pour IE */
	min-height:200px;

[guy2004]

Merci pour cette proprieté que je ne connaissais pas.
En fait je mets juste un minimum et puis ca va.
merci