Elargir un div en fonction de ses enfants

Bonjour à vous,
j'ai un problème très bateau (je suppose) à résoudre. Pour faire très simple voici un code html :

<div style="border: 1px solid #000000; background-color: #eeeeee">
	<fieldset style="width: 120%">
		<legend>Test</legend>
		La la li la la lère
	</fieldset>
</div>

lorsque je lance cette page, le <div> prend 100% de la largeur de la page, et le fieldset qui dépasse passe "à travers" le div. Je souhaiterai simplement que le div s'élargisse avec son élément fils (le fieldset donc).

Je suppose qu'il suffit de rajouter un petit brin de CSS, mais je ne sais pas lequel

Merci d'avance pour la réponse,
Genova.

Salut

bon je sais pas si un truc en css existe. les autres te diront peut-être.

mais reste sinon une solution mathématique 100/1.2 = 83.33333....
mets un width=83,3% a ton div?

pascal

Heu, mettre une largeur plus petite au div ne ferait-il pas qu'accentuer le problème ?

Bonjour à vous,
effectivement je ne comprend pas l'utilité de diminuer la taille de ma div ^^

Je souhaite simplement que lorsque le fieldset contenu dans la div dépasse la taille de la div, celle ci s'élargisse.

Merci d'avance.

Désolé si mon interrogation est bête, mais si la div fait 100% de la largeur de l'écran (c'est à dire qu'elle va du bord gauche au bord droit de l'écran), quel intérêt de faire en sorte que celle-ci s'élargisse au dela du bord de l'écran ?
Faire apparaître une barre de défilement horizontale peu ergonomique ?

Salut,
l'idée c'est que je ne peux pas toujours contrôler la largeur des informations affichés, et pour les petites résolutions certaines parties dépassent irrémédiablement vers la droite. Aussi plutôt que d'afficher un div qui est traversé par son block enfant (assez moche, bizarre que ce ne soit pas géré en standard tout de même), je veux simplement que le div s'élargisse avec

Enfin a mon sens c'est assez logique : j'ai un block imbriqué dans un autre block, si le block fils grandi, le block père devrait grandir avec, ce qui n'est pas le cas actuellement avec un fieldset dans un div
Modifié par Genova (10 May 2007 - 14:03)

En CSS, ça se fait comme ça :

div {display: table;}

Et la div devrait s'élargir pour contenir ses éléments enfants et descendants.
Par contre : pas de support de display: table dans Internet Explorer.

Donc :
- soit on utilise un tableau ;
- soit on imagine une solution autre, détournée.

Si tu veux des conseils sur une solution détournée qui corresponde à tes objectifs, il va falloir donner un aperçu plus concret de ton problème (une page de test visible en ligne, par exemple).

Bonjour, merci pour la réponse.

Effectivement ça semble corriger le problème sous firefox. Mais sous IE toujours le même souci.

Voici un screenshot de mon problème :


La page est cernée par un div dont voici la CSS :

.main
{	border-width: 1px 1px 1px 1px;
	border-color: #77aadd;
	border-style: solid;
	background-color: #ffffff;
	padding: 10px;
}

Et on voit bien le formulaire et les fieldset sortir du div. Une solution serait bien sur de réduire le formulaire, mais ce problème n'est visible que sur les petites résolutions, et ce ne serait que contourner le problème puisqu'il apparaît dans d'autres cas de figures.

Merci.

salut,

moi je faisais ma proposition c'est a cause de cette instruction là:

<fieldset style="width: 120%">

pour moi si le div s'agrandit et bien le fieldset aussi. avec un width: 120% qui entoure une div qui fait 100% de la taille de l'écran ça me parait relativement normal.

a mon avis passe par autre chose comme style ou gere la taille de ton div en conséquence. veux tu oui ou non qu'il y est 10% de chaque coté de marge?

je n'ai jamais testé mais tu pourrais peut-être utilisé un padding ( marge interne ) ? .
Modifié par CPascal (11 May 2007 - 10:11)

Le bloc contenant les deux fieldset, ou le form directement, devrait pouvoir être limité en largeur, ou avoir une largeur qui serait contenue dans son conteneur.

On peut voir la page en ligne ? Difficile de se prononcer avec juste une image...