Problema Contenedor y tres Columnas

manumaf · #1 (**permalink**) 03/08/2008, 12:37

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?

Mikmoro · #2 (**permalink**) 03/08/2008, 15:52

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:

manumaf · #3 (**permalink**) 04/08/2008, 17:47

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?

acoevil · #4 (**permalink**) 04/08/2008, 17:58

olle Mikmoro me podria explicar porfavor que funcion hace .corte {clear: both;} GRACIAS y voy exelente con los manuales jeje

Mikmoro · #5 (**permalink**) 04/08/2008, 18:04

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.

manumaf · #6 (**permalink**) 04/08/2008, 18:14

Yo probe tambien colocando el corte dentro de cada menu al final pero no me dio resultado, no existe alguna forma?

Mikmoro · #7 (**permalink**) 05/08/2008, 01:11

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.

manumaf · #8 (**permalink**) 05/08/2008, 11:45

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

Mikmoro · #9 (**permalink**) 05/08/2008, 11:57

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?

manumaf · #10 (**permalink**) 05/08/2008, 12:20

Exactamente quiero que esas columnas adopten la forma que tenga el contenedor del medio, osea que tambien sean dinamicas, ¿como ago?

Mikmoro · #11 (**permalink**) 05/08/2008, 12:24

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.

Mikmoro · #12 (**permalink**) 05/08/2008, 17:40

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

manumaf · #13 (**permalink**) 05/08/2008, 19:21

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!

Mikmoro · #14 (**permalink**) 06/08/2008, 01:21

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

Saludos.