definir height y div auto en divs

[abuenog]

Hola,

veo que he escrito mal el título, y no se entiende nada, aunque la pregunta es muy sencilla. Pero no encuentro la solución. A ver si me podéis
ayudar. La cuestión es la siguiente:

tengo un div bien sencillo:

<div style="position: absolute; background-color: red">
<div style="position: relative; ">Texto de demostración</div>
</div>

Donde el background se dibuja solo donde encontramos texto. Ahora quiero darle un height al div interior, de manera que tengo:

<div style="position: absolute; background-color: red">
<div style="position: relative; height:20px">Texto de demostración</div>
</div>

El problema es que ahora en explorer me dibuja el background con un width de 100%, y yo quiero que siga dibujandose solo encima del texto.
La idea es que el texto será dinámico, por lo que desconozco el width que va a tener el div.

Alguna sugerencia?

Gracias

[SiR.CARAJ0DIDA]

no entiendo.. pero ojo que trabajar con posiciones absolutas y relativas en IE es un dolor de guevos, lo primero es que no se puede seleccionar el texto que esta dentro de un div absoluto.

[abuenog]

Hola,

gracias por responder. Si quieres ver a lo que me refiero, coge los códigos que he puesto y verás la diferencia entre uno y otro. La cuestión es que el primer ejemplo te pinta de rojo solo la zona donde hay texto (el width se adapta al contenido del div interior). Pero si ves el segundo ejemplo, verás que se pinta de rojo no solo la zona del texto, sino que se pinta hasta el final de la página (supongo que se pinta el 100% del width).

Sabéis alguna solución para que aun definiendo el height siga cogiendo el width del contenido?

gracias

[fer10]

los divs por naturaleza son bloques.. por que no usas mejor elementos en linea y asi te quitas de broncas.. <span> y para definirle un width ? osea quieres que el tamaño del texto diga te que tamaño es tu div???

eso nunca lo avia visto definele: width: al contendedor..

[abuenog]

Hola,

os pongo un ejemplo de lo que quiero para que os hagáis una idea:

Código:

<style>
	 
.dialog{
	position: absolute;
}
	 
.dialog .dialog-head{
	position: relative;background-color: blue;height:25px;
}

.dialog .dialog-head-toolbar{
	position:absolute; right: 0px; background-color: yellow;
}

.dialog .dialog-body{
	position:relative;background-color: #4e7995; 
}
 
</style>

<div class="dialog">
	<div class="dialog-head">
		<div class="dialog-head-toolbar">
			<button>O</button>
			<button>O</button>
		</div>
		<div class="dialog-head-mid">Title</div>
	</div>
	<div class="dialog-body">
		Este texto no tiene ningún propósito razonable, ni aporta absolutamente<BR>
		ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y r<BR>
		eproducir el discurso de un político, un fragmento de la legisl<BR>
		ación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo <BR>
		mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que <BR>
		no tiene ningún propósito razonable.
	</div>
	
</div>

Si lo véis en Firefox veréis como funciona correctamente el código. En cambio en Explorer no funciona bien. El problema lo tiene el height:25 que hay en el head.
Lo que necesito es que funcione como lo hace con Firefox, es decir, que el div se adapte al tamaño del contenido.

No puedo colocar ningún width en ningún div, puesto que el contenido será dinámico y no puedo conocer el tamaño.

Gracias