div autoajustable según contenido

aniMAYtions · #1 (**permalink**) 15/06/2009, 04:18

Hola amig@s!!

Estoy haciendo una aplicación en .net y tengo un buen problema con el formato.

Mi aplicación de divide en un body, dentro un contenedor principal, dentro de este una cabecera y un cuerpo. En el cuerpo hay un radsplitter con 2 paneles, derecho e izquiero, cada uno con su/s correspondiente/s divs.

El panel de la izquierda tiene un árbol y no necesito hacerle nada, se ajusta bien al tamaño de la página, pero el de la derecha me gustaría que creciese a lo largo(osease, hacia abajo) según el contenido que aloja en cada momento. Este contenido se lo paso por un iframe, y ahí está el problema.

Os doy una referencia de los estilos que he puesto a ver si podeis guiarme:

Código:

html
{
	height:100%;
	width:100%
}
body
{
	height:100%;
}

#divContenedor
{
	width:100%;
	height:100%;
}

#cuerpo
{

	width:100%; 
	height:100%;
}
#divArbol
{
	width: 100%; 
	float: left;
	height:100%;
}
#divZonaEjecucion
{
	width: 100%; 
	float: right; 
	margin:auto;
	height:100%;

}

En divZonaEjecucion es dónde se aloja el iframe.

La complicación radica más que nada en que debería mantener los tamaños en porcentajes, nunca en píxeles.

Ahora mismo, para que me coja la altura necesaria pa ir haciendo pruebas le tengo un alto fijo al radsplitter.

Muchas gracias

P.D.: Perdón, se me olvidó deciros que la aplicación en principio está diseñada para IE 7

kseso? · #2 (**permalink**) 15/06/2009, 05:40

Hola Animaytions.
Aventurándome a equivocarme, pues no hay código html, te comento sobre ese contenedor:

Cita:

#divZonaEjecucion
{
width: 100%; /* en css el 100% lo es de todo su padre, no de lo que reste si hay otros elementos en su misma línea*/
float: right; /* esto hará que su padre no crezca a la par que este div*/
margin:auto; /*si mide el 100% de ancho, no tiene sentido esta propiedad */
height:100%;/* el 100% ¿de qué?* ¿su padre tiene definido un valor?/

}

Sobre tu consulta:

Cita:

el de la derecha me gustaría que creciese a lo largo(osease, hacia abajo) según el contenido que aloja en cada momento.

No le definas altura (o en todo caso, define un min-height), y para curarte en salud, añádele la propiedad "overflow: auto /o/ hidden", la que mejor te convenga, y si necesitas que ocupe el espacio restante en la horizontal, tampoco le fijes anchura.

Pero como te comentaba la inicio, sin ver la estructura del html, esto más que nada son orientaciones.

Un saludo

aniMAYtions · #3 (**permalink**) 15/06/2009, 05:56

Gracias kseso.

Siento no haber adjuntado la estructura del html, pero la escribo en un momentín.

Código:

<html>

<body>

<div id="divContenedor">

<div id="cabecera"></div>

<div id="cuerpo">

<rad:radsplitter>

<rad: radpane><div id="divArbol"></div></rad:radpane>
<rad:radsplitbar/>

<rad:radpane>
<div id="zonaEjecucion"><iframe/></div>
</rad:radpane>

</rad:radsplitter>
</div>
</div>
</body>
</html>

Si necesitais más código pedirlo y lo escribo.

Gracias!!

kseso? · #4 (**permalink**) 15/06/2009, 06:02

Cita:

Iniciado por aniMAYtions

Gracias kseso.

Siento no haber adjuntado la estructura del html, pero la escribo en un momentín.

Código:

<html>

</html>

Ahora ya está todo mucho más claro

Supongo que estarás editándolo

aniMAYtions · #5 (**permalink**) 15/06/2009, 06:03

Cita:

Iniciado por kseso?

Ahora ya está todo mucho más claro

Supongo que estarás editándolo

Jajajaja.... si kseso, fue un faio de tabulación...

josemigue83 · #6 (**permalink**) 09/07/2010, 11:49

Como hago para definir en un div que el div se ajuste al área del texto horizontalmente.

Por ejemplo tengo un texto en un submenú Pero me sale así:
“Como
Comprar “

Pero yo quiero que salga así:
“Como Comprar “

cesarpunk · #7 (**permalink**) 09/07/2010, 16:31

float: left

p.d. no desvirtues el tema