[Problème]Bloc dont la hauteur évolue selon son contenu

**mickdu90** · 13/10/2007, 11h53

Bonjour.

Je crée actuellement un site web pour une association.

Voici la structure de ma page :

J'aimerais que Center évolue en hauteur selon son contenu, et que les hauteurs de Right et Left varient avec celle de Center, car à l'heure actuelle, si je ne donne pas de hauteur minimum fixe à ces 3 blocs, Left et Right n'apparaissent pas (car pas de contenu), seul Center évolue avec le contenu :

Et si je donne des hauteurs en pixel, le texte sort du bloc par le bas et se retrouve sur le body.

En gros j'aimerais que toute la ligne du milieu soit variable en hauteur, selon le contenu affiché dans le bloc Center.

Si quelqu'un pouvait m'aider ca me sauverait car je bug là dessus depuis hier soir

Voilà, merci, bon appetit et bonne journée

**Golmote** · 15/10/2007, 13h57

Et si tu spécifies aucune hauteur ? ^^

Tu imposes celle du "Top", celle du "Bottom", mais pas celle du "Center"... Ca devrait permettre de dimensionner automatiquement. (A tester

)

**mickdu90** · 15/10/2007, 15h38

Non j'ai essayé, ca ne marche pas

**Candygirl** · 15/10/2007, 15h51

Il est censé venir quoi dans ce left et right ?

**mickdu90** · 15/10/2007, 15h59

Il est censé y avoir les images de bordures ombrées en PNG, qui doivent se répèter en hauteur...

**Candygirl** · 18/10/2007, 09h41

Dans ce cas tu devrais jouer avec une inclusion de div, par exemple:

Code html :

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

1
2
3
4
5
 
<div id="gauche">
    <div id="center"></div>
  </div>
</div>

Code :

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

1
2
3
4
5
6
7
8
#gauche {
  background: url(gauche.png) repeat-y top left;
}
 
#center {
  background: url(gauche.png) repeat-y top right;
  padding:0 20px; /* largeur de la bordure */
}

Dans cet exemple je pars du principe que ton design est de fluide et que tu n'as pas d'image de fond dans ton #center. Si tu as aussi une image de fond pour le #center, tu n'as qu'à passer par une inclusion de plus.

Si ton design est de taille fixe tu peux faire une seule image avec ton bord gauche et ton bord droite pour autant qu'ils aient la même hauteur de cycle et donc même appliquer directement ce seul fond à ton #center.

**mLk92** · 18/10/2007, 11h01

Salut, n'hésite pas à mettre des positions relative à tes bloc de texte contenu dans ton bloc center, pour qu'il reste dans le flux du conteneur (soit "center")

perso j'aurais fait 3 grands div

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="header">
   corner 1, top, corner 2
</div>
<div id="container">
   left, center, right
</div>
<div id="footer">
   corner 4, bot, corner 3
</div>

tu fixe une taille au header et au bottom et le reste se mettra en fonction de ce que t'a.

**mickdu90** · 18/10/2007, 13h11

J'ai finalement fait comme Candygirl l'a proposé : j'ai créé un seul div Center pour le milieu, avec une seule image de fond fixe en largeur.

Et ca fonctionne parfaitement

Merci pour votre aide, ca me donne tout de même des idées pour la suite...

Résolu