Conseguir longitud de una capa

[robandrox]

Hola a todos!!

Tengo dos capas dentro de otra capa(contenedor).Una está a la izquierda y otra a laderecha.El contenido de la capa de la dercha es variable(por lo que su longitud es varibla tambien cada vez que se abre la página), sin embargo, el contenido de la capa de la derecha es fijo,pero quiero que tenga la longitud de la capa de la derecha.Como podría hacer ésto??

Saludos

[caricatos]

Hola:

Con javascript se obtiene el tamaño con offsetHeight (y la anchura con offsetWidth)... Si quisieras evitar javascript podrías poner valores fijos y ponerle scrollbars (overflow: auto)

Saludos

[robandrox]

Con Javascript??La verdad es que no se mucho de javascript.Me podrias especificar un poco mas como hacerlo,por favor?.Muchas gracias

Saludos

[g05l21]

No se exactamente para que lo quieres, podrías especificar un poco más???

Si lo que quieres es poner otra capa debajo de las dos, por ejemplo, lo más comodo es ponerla con un "clear: both;" y siempre estará debajo de las dos, si lo que quieres es que tenga colores o derivados a lo mejor se podría probar poniendo la capa izq dentro de la derecha, así la capa de la derecha siempre se "ensancharía" al tamaño de la de la izq.

Bueno, son solo ideas, si lo explicas un poco más a lo mejor se me ocurren otras "chapucillas" ;)

[robandrox]

Haber,yo lo que quiero es que las dos capas que estan dentro de la capa contenedor tengan la misma longitud para que no se me quede la página asimétrica.el problema es que la capa de la derecha tiene una longitud variable,ya que su contenido sale de una DB.Lo entiendes ahora mejor??

[robandrox]

¿Alguna idea??

[g05l21]

Podrías poner los dos divs dentro de un contenedor (solo para ellos) y ponerle una altura al div del 100%. No lo he probado pero podría valer ya que la altura, se supone que va en función del padre.

Si no, intenta poner un screenshoot de lo que tienes y explica sobre la imagen que quieres. A ver si se me ocurren otras cosillas ;)

[g05l21]

Con

intenta poner un screenshoot de lo que tienes y explica sobre la imagen que quieres.

Me refiero a que quieres que salga en el div izq. Por ejemplo q se vea el mismo fondo, que tenga la misma imagen q lo de debajo salga justo debajo....

Para ver si salen otras posibles soluciones.

[robandrox]

He puesto una capa contenedor(le he llamado contenedorb) que contiene a estas dos capas a las que me refiero.EL resultado es que en IE,la capa de la izda toma la altura de la capa contendor pero la capa de la derecha ni se inmuta,sigue teniendo la misma altura.Pongo el codigo por si alguien tiene ganas de mirarlo:

Código:

A:link{text-decoration:none; color:#3333FF;}
A:visited{text-decoration:none;color:#3333FF;}
.contenedor{
text-align: left;
width: 850px;
_width:980px;
margin: auto;
}
#cabecera{
height : 100px;
width: 850px;
margin-top:10px;
padding-top:5px;
padding-left:0px;
_padding-left:65px;
padding-right:0px;
_padding_right:65px;
margin-right:0px;
_margin-right:20px;
margin-left:0px;
_margin-right:20px;
}
#cajaarriba{
height:100%;
background-image: url(../images/arriba.gif);
background-position: top center;
background-repeat: no-repeat;
padding-top:30px;
}
.caja {
width:230px;
height:100%;
background-image: url(../images/centro.gif);
background-repeat: repeat-y;
margin-top:50px;
float:left;
}
* html .caja{
margin-left:30px;
}
.cajaabajo {
height:100%;
background-image: url(../images/abajo.gif);
background-position: bottom left;
background-repeat: no-repeat;
padding: 15px 0px 15px 15px;
}
.lateralderecho{
width:600px;
_width:600px;
height:100%;
text-align:center;
margin-top:38px;
margin-left:5px;
padding: 13px 3px 0px 5px;
border-color:#aaa;
border-width:1px;
float:right;
}
* html .lateralderecho{
margin-right:30px;
}
#encabezado{
background-color:#9ACD32;
border-width:1px;
border-style:solid;
border-color:#9ACD32;
margin-top:0px;
margin-right:0px;
padding-top:0px;
top:0px;
padding:0px 0px 0px 0px;
text-align:center;
color:#FFFFFF;
}
H3{
margin-top:2px;
margin-bottom:2px;
}
#contenido{
border-width:1px;
border-style:solid;
border-color:#9ACD32;
margin-top:0px;
padding-top:50px;
text-align:center;
text-indent:0px;
font-weight:bold;
}
#contenedorb{
border-style:solid;
border-color:#aaa;
height:100%;
width:850px;
_width:980px;
}

y el HTML:

Código HTML:

<html>

<head>
  <title></title>
  <link rel="STYLESHEET" type="text/css" href="CSS/procesar.css">
</head>

<body>
<div class="contenedor">
<div id="cabecera"><img src="images/cabecera.gif" width="850" height="100"  border="0"></div>
<div id="contenedorb">
 <div class='caja'>
    		<div id='cajaarriba'>
        		<div class='cajaabajo'>
    			<ul>
     			<li><a href='home.php'>Inicio</a>
        		<li><a href='cambiarContrasena.php'>Cambiar contraseña</a>
        		</ul>
       			 </div>//Cierra caja
       		 </div>//Cierra cajaabajo
        </div>//Cierra caja
        <div class="lateralderecho">
          <div id="encabezado">
    	    <h3>Está matriculado de los siguientes cursos:</h3>
          </div>//Cierra encabezado
        <div id="contenido">
               Aqui va texto y mas texto
</div>//Cierra contenedorb
</div>//Cierra contenedor
            

[thisisalexis]

Sería bueno que alguien respondiera a esta interrogante; tengo meses intentando hacer esto y no he podido.

[g05l21]

Lo he estado mirando un poco por encima. Perdona no haberte contestado antes, pero de vez en cuando hay que trabajar un poco

Aquí hay unos screenshot retocados del efecto en un firefox y en un Explorer




A ver, lo primero metele algún Doctype que para los temas de alturas siempre viene bien, también debes definir la altura en todos los padres de los divs que necesiten alguna altura.

El mayor problema es que para firefox, si le indicas altura 100% y luego le das un margin-top el bloque coje el 100% de la altura del padre (por ejemplo 125px) y luego le suma el margin (si por ejemplo el margin-top es de 50px, el bloque sale por debajo del padre esos 50px) así q deberías no usar el margin si quieres que se vea bien en el Firefox (y demás navegadores que cumplen los standar del W3C)

Pero poniendo todos los padres con height (100% por ejemplo) incluido el html y el body los divs deberían bajarte hasta abajo.

Además de eso comprueba el css, está un poco enrevesado

Espero que te sirva.