CSS - positionnement absolu et largeur

[captain_torche]

Dans une page, je dois placer un sous-élément en bas de son élément parent.

Je le place en absolu, et tout fonctionne bien, sauf la largeur de l'élément, qui se comporte maintenant comme s'il était de type inline.

Un width: auto; ne fonctionne pas, et un width: inherit; le fait fatalement dépasser du conteneur parent, la faute au padding.

Je ne peux pas spécifier de largeur en pixels, le bloc parent ayant une taille variable.

Idéalement, j'aimerais éviter d'avoir à utiliser une balise supplémentaire, qui aurait une taille en inherit sans padding.

Comment faire pour pallier à ce souci ?

[Ernestine]

Salut Captain,

La seule solution que je vois, ce serait d'attribuer background: url(rouge.gif) left bottom repeat-x; au conteneur, où "rouge.gif" est une image rouge de 1 pixel de large, de façon à "simuler" une ligne en bas du conteneur.

Mais ça t'oblige à utiliser une image, et cela ne te convient peut-être pas. A part ça, je ne vois pas d'autres solutions...

[captain_torche]

Merci pour l'astuce, j'attends de voir s'il existe d'autres moyens et je finirai par l'utiliser si je n'ai pas d'autre choix. Par chance, la hauteur de cet élément est fixe.

[mick38]

Et un "overflow: hidden" sur le bloc parent, ça peut peut-être marcher ?

[mick38]

Quoique ca risque de rogner du texte à l'affichage si le contenu est juste à la limite du "trop long"

[mick38]

Une autre option, qui semble fonctionner en tout cas sur FF et Safari :

			p {
				padding:			2% 5%;
				margin:				0;
			}
			#p_auto{
				width:				90%;
			}

[captain_torche]

La seconde solution ne peut pas fonctionner : j'ai des marges fixes, et une largeur totale variable.

Par contre, la première était la bonne, merci !

[MarvinLeRouge]

STOP !

Arrêtez de vous prendre la tête, j'ai trouvé : c'est juste le padding 5px sur les p qui s'appliquait aussi à ton #p_inherit, du coup, quand tu lui donnais un width inherit (ou 100%), il se retrouve à occuper 100% de son parent + 10px.

Essaye ça :

#p_inherit2
{
  width : 100%;
  padding : 5px 0;
}

[captain_torche]

Effectivement, mais j'ai quand même besoin du padding