Foros del Web » Creando para Internet » CSS »

[ayuda] Div FLOAT:LEFT Y Height 100%

Estas en el tema de [ayuda] Div FLOAT:LEFT Y Height 100% en el foro de CSS en Foros del Web. Hola gente. estoy haciendo una plantilla y necesito hacer que el DIV costado sea del mismo tamaño que el wrap.... les doy una imagen de ...
  #1 (permalink)  
Antiguo 08/06/2009, 17:34
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
[ayuda] Div FLOAT:LEFT Y Height 100%

Hola gente. estoy haciendo una plantilla y necesito hacer que el DIV costado sea del mismo tamaño que el wrap.... les doy una imagen de lo que quiero aver si se guian mejor
IMAGEN img36.imageshack.us/img36/367/dibujoqol.jpg

yo necesito que el DIV costado se agrande en HEIGHT hacia abajo hasta llegar al div del costado.
pongo el codigo fuente.

index.html
Código:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
	<div id="encabezado"></div>
    <div id="costado">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><br />
        <br />
        <br />
      </p>
    </div>
	<div id="contenido">
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	</div>
<div id="footer"></div></div>
</body>

</html>

style.css
Código:
#encabezado{
background-image: url(images/header.png);
background-repeat:repeat-x;
width:770px;
height:160px;
	margin: 0 0 0 0px;
	padding: 0 0 0 0px;
}
#wrap{
width:771px;
height: auto;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0 0 0 0px;
}
#costado{
	background-image: url(images/cbackground.png);
	background-repeat: repeat-x;
	background-color: #66b80e;
	width: 186px;
	min-height: 100%;
	max-height: 100%;
	height: 100%;
	float: left;
	padding:0 0 0 0 px;
	margin: 0 0 0 0 px;
}
#contenido{
background-image: url(images/centro.png);
width: 555px;
margin-left: 186px;
padding: 10px 15px 7px 15px;
	background-repeat: repeat-x;
	background-color: white;
}
body{
  margin: 0;
  padding: 0;
background-image: url(images/fondo.png);

}
#footer{
	background-image: url(images/footer.png);
	background-repeat: no-repeat;
	width: 771px;
	height: 67px;
}
y veran que este es mi post de presentacion, estoy registrado hace tiempo pero como todo lo que necesitaba ya estaba posteado anteriormente, eso me solucionaba las dudas.. pero ahora me mato :S no encuentro solucion, estube googleando como 3 horas y no encontre nada.. encontre esto csscreator.com/node/20471 pero no me sirve de nada ya que no entiendo la explicacion tan extensa que da.
  #2 (permalink)  
Antiguo 08/06/2009, 17:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

En www.araudi.net tienes un ejemplo de columnas equilibradas (autor: Mikmoro)
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 08/06/2009, 18:07
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

gracias pero no lo entiendo mucho a como aplicar eso.. Estube un rato probando y probando y me salio algo medio raro... espero que alguien sepa explicarme que significa esto
Código:
<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
.style1 {width: 280px; float: left; padding: 20px; position: relative; margin-left: -350px; color: #000000; }
</style>
</head>
<body>
<div id="caja_izq">
  <div id="caja_der">
    <div class="style1">
      
    </div>
    <div class="columna_derecha"> </div>
  </div>
</div>
  #4 (permalink)  
Antiguo 08/06/2009, 18:27
 
Fecha de Ingreso: noviembre-2004
Mensajes: 117
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

El problema es que usando CSS compatible el resultado no es 100% crossbrowser, aparte de algun hack css que te hará falta.

Viste algo tipo http://960.gs o similar?
__________________
Saludos a todos ;)

Fiat en Malaga
.. y ahora con CSS!
  #5 (permalink)  
Antiguo 08/06/2009, 18:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Cita:
Iniciado por Nono Martínez Ver Mensaje
El problema es que usando CSS compatible el resultado no es 100% crossbrowser, aparte de algun hack css que te hará falta.

Viste algo tipo http://960.gs o similar?
SI haces semejante afirmación, creo que estás obligado a demostrarla, hasta entonces será mejor que añadas algo así como "yo creo que...", "a mi me parece que...". Porque yo casi tengo la certeza que lo que has escrito es incierto.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 08/06/2009, 22:24
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Código javascript:
Ver original
  1. <script type="text/javascript">
  2. window.onload = function(){
  3.    document.getElementById('costado').style.height = document.getElementById('wrap').offsetHeight;
  4. }
  5. </script>

Espero que te sirva.
__________________
twitter: @imbuzu
  #7 (permalink)  
Antiguo 09/06/2009, 11:30
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Cita:
Iniciado por buzu Ver Mensaje
Código javascript:
Ver original
  1. <script type="text/javascript">
  2. window.onload = function(){
  3.    document.getElementById('costado').style.height = document.getElementById('wrap').offsetHeight;
  4. }
  5. </script>

Espero que te sirva.
lo pongo dentro del body y no hace nada :(... voy a cambiar mi pregunta aver si me dan algo facil que me sirva y q no tenga que ser un pro como ustedes en el tema de lenguajes.
Como hago que el div wrap se estire automaticamente cuando el div contenido tenga mucho texto... Gracias.

la verdad esto me hace pensar en volver a las tablas :S. solo por el simple hecho que se puede hacer sin tanto lio :(, no habra algun comando, funcion o linea para hacer que el maldito div se alargue hacia el 100%. gracias a todos.
  #8 (permalink)  
Antiguo 09/06/2009, 11:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Hola Avispa987:
Sigo pensando que lo que buscas es una estructura de dos columnas equilibradas (que aparenten crecer simultáneamente).
En la página que te comenté, tienes este ejemplo:
http://www.araudi.net/ejemplos/colum...ilibradas.html

Prueba a añadir texto a cualquiera de los dos contenedores, verás que el otro "crece a la par".

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 09/06/2009, 12:25
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Cita:
Iniciado por kseso? Ver Mensaje
Hola Avispa987:
Sigo pensando que lo que buscas es una estructura de dos columnas equilibradas (que aparenten crecer simultáneamente).
En la página que te comenté, tienes este ejemplo:

Prueba a añadir texto a cualquiera de los dos contenedores, verás que el otro "crece a la par".

Un saludo
si, lo hice a eso, vi que trabaja bien pero no logro entender cual es la funcion de cada div.. porque por lo que yo tengo entendido son dos divs uno adentro del otro, y no se como espaciarlo ni nada.. si me lo podrias explicar.. osea como trabaja.
por ej que me digas.

border: 1px; esto hace que tu div tenga el bordecito ..o no se :( disculpame porque se poco de css todavia. me estoy instruyendo permanente, de ahi salio este proyecto =P

muchas gracias... hasta ahora el que mas me sirvio
  #10 (permalink)  
Antiguo 09/06/2009, 13:34
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

EDITO: VER LA RESPUESTA DEL AUTOR UNO MÁS ABAJO

Pues con permiso del autor (;-D) voy a intentar explicarlo, de fuera a dentro:
Hay una caja contenedora de todo, que Mik llama
#caja_izq: es la azul (que aunque no se ve, se prolonga por debajo de la verde), de 850 px de ancha y con el margen la centra. El overflow es para que crezca a la vez que las que tiene dentro.

Dentro de ella está #caja_der: la de color verde, puesta a la derecha de de la caja azul y tapandola con su color. Tiene una anchura de 500px
un borde de 30px blanco a su izquierda (con ese borde evita que el color azul llegue hasta el color verde).

Dentro de la caja verde están metidas las que llama columnas, que son donde está el texto. Hasta ahora sólo ha preparado el terreno para tener dos colores que van a crecer simultáneamente cuando lo haga cualquiera de las columnas.

.columna_izquierda: con anchura fija, con float y relative la sitúa en la parte izquierda (de la caja verde) y para llevarla fuera de ella hasta el límite de la caja azul le da un margen izquierdo negativo (-340px).

.columna_derecha
: le fija una anchura también para que no se empujen, la coloca en su lugar con el float (él tiene marcado left).

¿Cual es el secreto? que los dos div que tienen el texto está metidos en la caja verde que a su vez está dentro de la azul, con lo que si uno de las dos columnas crece, hace crecer el color verde y este a su vez el color azul. Así de ingenioso.

Espero haber sido capaz de explicártelo. Pero la mejor manera de comprender su funcionamiento y qué hace qué es que te bajes esa página y hagas un cambio y veas cómo le afecta. Restituyes el cambio y a hacer otra prueba.

Suerte.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 09/06/2009 a las 17:04
  #11 (permalink)  
Antiguo 09/06/2009, 16:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

En la parte final de este mensaje de las FAQ de CSS tienes para bajarte un zip con los ejemplos y una espero que bien clara explicación.
  #12 (permalink)  
Antiguo 09/06/2009, 16:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Cita:
Iniciado por Mikmoro Ver Mensaje
En la parte final de este mensaje de las FAQ de CSS tienes para bajarte un zip con los ejemplos y una espero que bien clara explicación.
Ya me parecía a mi tener una sensación rara cuando estaba contestando
Mik, araudi necesita una actualización del index
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 09/06/2009, 16:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

No era por enmedarte la plana, claro, sino porque creo que es uno de los pocos artículos que ya tenía escritos.

Y creo que te sonaba porque es precisamente aquel que hice de prueba que te enseñé (creo recordar), cuando estaba haciendo la web un poco en serio
  #14 (permalink)  
Antiguo 09/06/2009, 17:00
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

Tienes tanto ahí tirado, que ya pierde uno la cuenta.
Y ya no me queda sitio en favoritos para seguir guardando más
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 09/06/2009, 20:39
 
Fecha de Ingreso: diciembre-2008
Mensajes: 5
Antigüedad: 9 años
Puntos: 0
Respuesta: [ayuda] Div FLOAT:LEFT Y Height 100%

muchisimas gracias chicos, lo voy a reveer pronto
:apla uso:

Mik, podes ser tan groso? y gracias kseso por ayudarme, con tu explicacion y el faq de mik me aclararon mucho, por ahora seguire intentando hacerlo cuando tenga tiempo `^^
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:04.