WIDTH variable de una DIV

zayed_jat · #1 (**permalink**) 15/07/2008, 15:01

Hola

Tengo una div-TOP
y otras 3 encolumnadas abajo
-menu
-principal
-rightOpciones

Dentro de cada div meto un iframe para mostrar distintas paginas en cada frame metida en su correspondiente div.

El problema es que la principal no sigue la redimension del navegador.

Alguien puede orientarme para allar la mejor solucion. Sin js RIGUROSO.

Añado el codigo sin las iframes, que en las height funciona bien. pero cdo pongo
iframes ya el comportamiento no es el mismo. Pero ese es otro tema.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:105px; z-index:1; background-color: #996666; layer-background-color: #996666; border: 1px none #000000;"></div>

<!-- Comienzo de las 3 columnas -->
<div id="Layer2" style="position:absolute; left:0px; top:105px; width:160px; height:100%; z-index:2; background-color: #00CC99; layer-background-color: #00CC99; border: 1px none #000000;"></div>
<div id="Layer3" style="position:absolute; left:160px; top:105px; width:470px; height:100%; z-index:3; background-color: #999900; layer-background-color: #999900; border: 1px none #000000;"></div>
<div id="Layer4" style="position:absolute; left:630px; top:105px; width:160px; height:100%; z-index:4; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000;"></div>
<!-- fin de las 3 columnas -->
</body>
</html>

Desde ya gracias por la atencion.

David · #2 (**permalink**) 15/07/2008, 15:35

Me he confundido leyendo tu pregunta. Ya que el título dices Width variable, mientras que en tu código estás poniendo un ancho absoluto.
Luego comentaste que no sigue la redimensión del navegador, ¿vertical u horizontal?.

Si podrías aclararnos tal vez podremos ayudarte.

Saludos

zayed_jat · #3 (**permalink**) 16/07/2008, 14:08

claro le pongo los pixeles para que tome forma
yo quiero que
la div de la izquierda sea de 160
la del medio ajustable al navegador (uso porcentajes pero no me sale!)
y la derecha de 160

luego, con la del medio fija, le meto una iframe dentro pero ya no se comporta del mismo modo. eso es lo que quise decir. espero ser mas claro. gracias.

daPhyre · #4 (**permalink**) 16/07/2008, 15:59

¿Puedo preguntarte para que usas la posición absoluta? Conosco una solución pero no funcionará con estas...

zayed_jat · #5 (**permalink**) 17/07/2008, 09:37

que si no son absolutas no se como ponerlas donde quiero,
es decir se ponen en cualquier lado o mejor dicho no se como ponerlas
donde las necesito.

Yo quisiera que la div del medio cambie en la medida q lo haga el navegador (rezise de la windows)

daPhyre · #6 (**permalink**) 17/07/2008, 09:42

No estoy seguro que es lo que quieres, pero intenta esto:

Código HTML:

<div id="Layer2" style="float: left; width:160px; height:100%; background-color: #00CC99; layer-background-color: #00CC99; border: 1px none #000000;"></div>
<div id="Layer4" style="float:right; width:160px; height:100%; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000;"></div>
<div id="Layer3" style="height:100%; background-color: #999900; layer-background-color: #999900; border: 1px none #000000;"></div>

zayed_jat · #7 (**permalink**) 21/07/2008, 07:57

Grandiosa resolucion de la volada!
Ya me habia supuesto que no se podia conseguir eso
y lo resolvi haciendo marcos frame
que me obigaron a reconstruir un menu de 160xnnn

Funciona.

Gracias por los aportes.

Agrego que mis divs iniciales funcionaban "bien" con las redimensiones, siempre y cuando no les metiera una iframe dentro. Espero que funcione el codigo de DaPhyre con las iframes dentro.

Luego las pruebo ya que estoy empelotonado de problemas!

gracias por desVurrarme!

poison_mayer · #8 (**permalink**) 22/07/2008, 08:51

Usa esto espero te sirva

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="" content="text/html; charset=iso-8859-1">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:105px; z-index:1; background-color: #996666; layer-background-color: #996666; border: 1px none #000000;"></div>


<div id="Layer2" style="position:absolute; left:0px; top:105px; width:160px; height:100%; z-index:2; background-color: #00CC99; layer-background-color: #00CC99; border: 1px none #000000;"></div>
<div id="Layer3" style="margin:105px 160px 0 160px; padding-top:105px ; z-index:3; background-color: #f1f1f1; border: 1px none #000000; height:100%;">jihsjkdfhjkahsdjkfhajkshdfjklhaskljd fh</div>
<div id="Layer4" style="position:absolute; right:0px; top:105px; width:160px; height:100%; z-index:4; background-color: #00CCFF; layer-background-color: #00CCFF; border: 1px none #000000;"></div>

</body>
</html>