Foros del Web » Creando para Internet » CSS »

Problema Contenedor y tres Columnas

Estas en el tema de Problema Contenedor y tres Columnas en el foro de CSS en Foros del Web. Hola, mi problema es que tengo un contenedor con 3 columnas dentro y cuendo alguna de las columnas se extiende sobrepasa por arriba el contenedor ...
  #1 (permalink)  
Antiguo 03/08/2008, 13:37
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Problema Contenedor y tres Columnas

Hola, mi problema es que tengo un contenedor con 3 columnas dentro y cuendo alguna de las columnas se extiende sobrepasa por arriba el contenedor en vez de aumentar de amo como las columnas.


Mi codigo:
Código HTML:
<style type="text/css">

#contenedor {
width: 800px;
background-color:#999999;
height:100%;
border-right:2px solid #ACCFE8;
border-bottom:0px solid #356AA0;
border-left:2px solid  #ACCFE8;
}

#menu {	
width: 150px;
background-color:#DBEBF6;
border-right:2px solid #ACCFE8;
border-bottom:0px;   
float:left;
}

#contenido {
width: 496px; 
border-right:2px solid  #ACCFE8;
float:left;
}

#menuderecho {
width: 150px;
background-color:#DBEBF6;
float:right;
 }	
</style>

</head>

<body>

<div id="contenedor">
		
	<div id="menu"></div>

    <div id="contenido">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
   </div>
		
	<div id="menuderecho"> </div>


</div> 

Aqui lo resumi para que vean las estructura basica, cuando la div "contenido" aumenta de tamaño sobrepasa por arriba la div "contenedor"
Como hago para que eso no suceda?
  #2 (permalink)  
Antiguo 03/08/2008, 16:52
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: Problema Contenedor y tres Columnas

Añade este selector a tu css:

.corte {clear: both;}

Y en html añade ese div justo antes de cerrar el del contenedor:

<div class="corte"></div>

Osea, aquí:

Cita:
<div class="corte"></div>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 04/08/2008, 18:47
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Problema Contenedor y tres Columnas

Un millon de gracias


Lo unico que me surgio un nuevo problema, en la divs "menu" y "menuderecho" toman un height del tamaño de lo que contienen y necesito que tengan las misma dimenciones que el contenedor, ya probe poniendo height:100%; pero no me funciono, como devo hacer?

Última edición por manumaf; 04/08/2008 a las 18:57
  #4 (permalink)  
Antiguo 04/08/2008, 18:58
Avatar de acoevil  
Fecha de Ingreso: julio-2008
Ubicación: localhost/colombia/sevillaValle.php
Mensajes: 1.123
Antigüedad: 9 años, 4 meses
Puntos: 30
Respuesta: Problema Contenedor y tres Columnas

olle Mikmoro me podria explicar porfavor que funcion hace .corte {clear: both;} GRACIAS y voy exelente con los manuales jeje
  #5 (permalink)  
Antiguo 04/08/2008, 19:04
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: Problema Contenedor y tres Columnas

Cuando una caja está flotada (float:left o right), no hace crecer a la caja que la contiene, por eso digamos que la caja crece pero el "fondo" no crece (en realidad, la caja que la contiene).
Cuando das ese corte, lo que haces es que la caja contenedora crezca a la fuerza para contener el div que da el corte, y como este está después de la caja flotada, entonces la contenedora crece tanto como la caja flotada y la del corte, consiguiendo que entonces el "fondo" crezca.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 04/08/2008, 19:14
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Problema Contenedor y tres Columnas

Yo probe tambien colocando el corte dentro de cada menu al final pero no me dio resultado, no existe alguna forma?
  #7 (permalink)  
Antiguo 05/08/2008, 02:11
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: Problema Contenedor y tres Columnas

Eso es mucho más complicado, entre otras cosas porque IE tiene un problema importante para entender algunas propiedades que son las que no permiten hacer eso.

Para saber con exactitud si en tu caso habría solución tendríamos que verlo, pero échate un vistazo a este mensaje y verás que tiene jaleo.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 05/08/2008, 12:45
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Problema Contenedor y tres Columnas

Aca te dejo un ejemplo http://expertoswebs.com/menus/


Mi problema es que como veras la tanto la columna izquierda como la derecha no se extienden hasta el pie de la página si no que se extienden segun el contenido que contienen, la solucion que me diste esta muy buena pero no se como aplicarla a este caso, alguna solucion??



Muchisimas gracias
  #9 (permalink)  
Antiguo 05/08/2008, 12:57
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: Problema Contenedor y tres Columnas

Supongo que quieres decir que quieres que se extiendan hasta abajo, teniendo en cuenta que el contenido de la columna central es dinámica, es decir, que cambia de longitud, ¿no?
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 05/08/2008, 13:20
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Problema Contenedor y tres Columnas

Exactamente quiero que esas columnas adopten la forma que tenga el contenedor del medio, osea que tambien sean dinamicas, ¿como ago?
  #11 (permalink)  
Antiguo 05/08/2008, 13:24
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: Problema Contenedor y tres Columnas

Es complicado. Luego miro si puedo encontrar la manera de hacerlo con el código que has puesto en el enlace de ejemplo, pero no te prometo nada; para mi que es una de las cosas más jodidas que hay con css.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 05/08/2008, 18:40
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: Problema Contenedor y tres Columnas

Aquí está el ejemplo.

Lo he subido ahí porque te he hecho un par de modificaciones en el html y alguna más en la css

En primer lugar, tenía bastante poco sentido que empezaras por una tabla cuando todo lo demás estaba con divs maquetados dentro de una misma celda.

También tenías un problema con las anchuras en IE6, que se llevaba el menú derecho abajo. De las clases que no estaban implicadas en la estructura no he tocado nada.

Echa un vistazo al código y descubre cómo está hecho el truco, que no es difícil
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 05/08/2008, 20:21
Avatar de manumaf  
Fecha de Ingreso: mayo-2007
Ubicación: Argentina
Mensajes: 853
Antigüedad: 10 años, 7 meses
Puntos: 6
Respuesta: Problema Contenedor y tres Columnas

Claro, muy buena la solucion, ponerle el fondo del color de las columnas y los bordes a la columna del medio, ademas me arreglaste algunas cosas de CSS

Un millon de gracias... maestro!
  #14 (permalink)  
Antiguo 06/08/2008, 02:21
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: Problema Contenedor y tres Columnas

Así es; en este, caso debido a tu diseño no era tan difícil simularlo.



Saludos.
__________________
Visita mi nueva web idplus.org
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 00:45.