Version complète: sur le forum Webmaster Hub : Comment "Encapsuler" un bloc dans un autre
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
MikaA
Bonsoir à tous,

Je me suis mis récemment à jour niveau XHTML (valide!) et CSS, et me voilà face à un problème qui peut paraître simple, mais dont je n'ai pas encore trouver de solutions...

Imaginons ceci :

******* attention, ceci est du code pur et dur ! C'est pas pour les rigolos !********

<div id="boite1">
<div id="boite2">
//Ici, mettre un texte long !
</div>

</div>

******* attention, fin du code ! On peu rigoler maintenant !********

Pour imager un peu le problème, mettons un fond pour la boite1

#boite1
{
background-color: F00;

}

Que se passe-t'il ?

Sur FireFox, la boite 1 ne s'agrandie pas pour contenir l'ensemble du texte (si il est long), alors qu'elle s'agrandie sur IE. Alors oui, je sais, c'est un comportement normal...

Question

Comment faire en sorte que la boite1 s'adapte à la taille de la boite2 sachant qu'on ne connaît absolument pas la taille qu'aura le texte de la boite 2 ?

Merci et bonne soirée smile.gif
Fanou
Salut MikaA...

Première chose, pour la couleur, c'est :
background-color: #F00;

Ensuite, pour que la boite1 s'agrandisse par rapport à la 2, il faut ne pas donner de taille en hauteur (j'imagine que tu veux que la boite s'allonge)...

Donc tu mets la largeur souhaitée avec width , et pas de height...

Tiens nous au courant.


Fanou
Mikiman
Bonsoir,

Avec un :
CODE
width: auto;
height: auto;


Ca marchera peut-être wink.gif

Cordialement,
Mikiman
bibou2635
Bonsoir MikaA,

je ne comprend pas pourquoi tu veux insérer un div dans un div ?

Pour mettre en forme le contenu dans la boite 1, tu peux tout simplement utiliser les balises adéquates comme :

<p id=""><p>

ou <ul>
<li></li>
</ul>

En supprimant les marges dans ta feuille de style de ces conteneurs, non ?
baulet
bonjour,

je dirais sans avoir essayé :

position : relative;

pour la boite 2...

tiens nous au courant wink.gif
wonderclochette
salut,

CITATION(MikaA @ mardi 2 janvier 2007, 19h21) *
Comment faire en sorte que la boite1 s'adapte à la taille de la boite2 sachant qu'on ne connaît absolument pas la taille qu'aura le texte de la boite 2 ?


En fonction du code que tu as donné la boite 1 ne peut que s'adapter au contenu de la boite 2 et ce quelque soit le navigateur !!!

Si y tu a un problème et que tu souhaites une solution tu devrais commencer par rédiger ta question de manière plus précise et compréhensible wink.gif

merci
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.