La duda de siempre: hacer que un bloque Div ocupe siempre una porción de la página

darkgaze · #1 (**permalink**) 08/09/2006, 09:28

Me refiero a que lo que quiero es dividir la pagina verticalmente.

Poner Height: 100%; no funciona!. Solo ocupa el 100 por ciento de la página al cargarse, pero luego las cosas que flotan a su derecha en Explorer lo que hacen es pegarse justo cuando este bloque acaba.

Lo que quiero es dividir en dos partes la pagina. La parte dle menú a la izquierda.

Demonios. como se hace para que un div sea infinito??, lo que necesite la pagina. Tiene que ser facil!!

gracias chicos.

K3NNY · #2 (**permalink**) 08/09/2006, 09:34

En vez de "100%" proba con "auto".

jesusbet · #3 (**permalink**) 08/09/2006, 10:43

ponle un div clear antes de cerrarlo :s o usa la técnica clearfix

darkgaze · #4 (**permalink**) 08/09/2006, 15:41

div clear?. harl. que es esorrr?.

No ha funcionado el auto, como suponía. Se queda en lo minimo. No se alarga infinito.

Debería de ser facil.
Voy a mirar lo del clear fix. gracias chicos.

darkgaze · #5 (**permalink**) 08/09/2006, 15:45

uff. demasiado para mi. Mucho texto y poco puedo sacar en claro. tiene que estar chupado!. A nadie se le ocurre una forma facil que hacer que dos bloques así?.

un bloque grande que ocupa todo, y que tiene un margen izquierdo del tamaño del menú. Dentro el menú pegado a la izquierda. Caramba, porqué no crece??... yo quiero que sea de la misma altura que el bloque grande! no vale auto, no vale 100%... que hago??

jesusbet · #6 (**permalink**) 08/09/2006, 22:16

aish... todos quieren bandeja de plata... solo tienes que copiar:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

en tu hoja de estilos, y al div contenedor de los flotados le pones class="clearfix"

darkgaze · #7 (**permalink**) 09/09/2006, 05:25

jo. lo siento es que tengo exámenes y no podía leerme todo. Lo he ojeado y había mucho código.

Gracias, de veras. Voy a probarlo ahora.

darkgaze · #8 (**permalink**) 09/09/2006, 05:30

No funciona.
Creo que es algo mas profundo esto...

He probado poniendolo el class en el menu de la izquierda y nada. He puesto una caja qeu contenga todo absolutamente todo y tampoco.

....

Tengo uqe ojear el css. CUando vea qeu ya no sé que demonios hacer escribo de nuevo.

Una cosa imoprtante:

Cuando pongo la web en IE el menú de la izquierda flota con la parte de la derecha.

En realidad no flotan, para intentar arreglar , puse que la parte de la derecha tuviera un margen del ancho del menú, para qeu así se lo saltara. Pero en IE el margen se lo come tambien el menú de la izquierda... agh..

zsamer · #9 (**permalink**) 09/09/2006, 10:57

hola a mi tambien no me funciona con css.

aqui va el codigo haber si alguien lo corrige para que funcione

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>footerStick - Footer sticks to bottom of page</title>

 
<style>

<!--

html,body {

    height:100%;

}

 
#contenedor{

    width: 700px;

    height: auto;

    background-color: #999999;

}

 
 
#menu_izda{

    float: left;

    width: 250px;

    background-color: red;

    height: auto;

}

 
 
#contenido{

    float: right;

    height: auto;

    width: 450px;

    background-color:#cccccc;

}

 
.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

 
/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */

-->

</style>

 
</head>

 
<body>

 
<body>

 <div class="clearfix" id="contenedor">

 
    <div id="menu_izda">

    Left Col<br>

    This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long.

    </div>

 
 
    <div id="contenido">

        Contenido<br>

        This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long.

        This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long. This is content of the MIDDLE column. It can be short, longer or very long.

    </div>

</div>

</body>

</html>

jesusbet · #10 (**permalink**) 09/09/2006, 12:11

ok... cambia el menu_izda a:
<div id="menu_izda">
Left Col<br>
This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long.
<div style="clear:both; height: 1px; width: 100%;"></div>
</div>

Chécalo así...

darkgaze · #11 (**permalink**) 09/09/2006, 13:32

o sea que en el menu de la izquierda ponemos eso?.

A mi tampoco me funciona.

Creo que voy ap oner la estructura de mi web aqui, sin datos, para que veais. No entiendo nada. !! Como es posible que algo tan facil de hacer no salga?

Código:

<BODY>
	<div id="IZQUIERDA">
	     <div id="MENU_IZQ"></div>  
            (esta linea carga unos enlaces flotantes y un fondo en este bloque).
	   y aqui dentro va una lista de enlaces estilizados.
        </div>
	<div id="DERECHA">
                Cosas...
        </div> 
</body>

y aqui el css relativo a eso:

Código:

#IZQUIERDA{
   position: absolute;
   height: 100%;
   width: 350px;
   padding:0px;
   margin:0px;
   background-image:url(img/fondoRepeticionNuevaWeb.jpg); 

Ese fondo es el que debería estar repitiendose infinito.

   background-repeat:repeat-y;
   background-position:left;   
}

#MENU_IZQ{
   background-image:url(img/LogoYMenu.jpg);

Y esto es la imagen del menú que llevará unos enlaces flotantes.

   background-repeat:no-repeat;
   background-position:top left;
   height:700px;
}

#DERECHA{
   margin-left: 350px;
   padding-left: 15px;
   overflow: auto;
}

zsamer · #12 (**permalink**) 09/09/2006, 14:40

Cita:

Iniciado por jesusbet

ok... cambia el menu_izda a:
<div id="menu_izda">
Left Col<br>
This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long. This is content of the LEFT column. It can be short, longer or very long.
<div style="clear:both; height: 1px; width: 100%;"></div>
</div>

Chécalo así...

no funciona el div de la izquierda debería ajustar la altura al del contenido, osea el background rojo debería llegar hasta donde termina el otro div de contenido.
y no lo hace.

MaXaC · #13 (**permalink**) 09/09/2006, 17:12

probaron con Faux Columns??

darkgaze · #14 (**permalink**) 09/09/2006, 17:33

wwoooooooo! increible, amigo. gracias. voy a ver si me vale!!! miles de gracias. echadle un look el resto, es estupendo.

darkgaze · #15 (**permalink**) 09/09/2006, 17:51

No es mi caso. No me vale.

Mi fondo no se puede tilear.Neceisto que sea infinito hacia la derecha tambien.
Alguien da mas?