He guardado varias imagenes que les ayudaran a entender como es la estructura de el template.
En principio, defini una capa, a la que llamare "template" (dentro de esta descanzara toda la estructura), es importante destacar que tiene un ancho definido, pero no un alto, osea, su ancho es constante, pero su alto varia segun sea necesario.
http://img458.imageshack.us/img458/6348/54593762gy6.jpg
Esta capa ("template") esta subdividida en 3 grandes capas.
http://img218.imageshack.us/img218/3953/63250915hp7.jpg
"header" donde se encontrara el header, "menu" donde se encontrara el menu, y "columna", que a la ves estara subdividida como lo indica la siguiente imagen.
http://img458.imageshack.us/img458/4082/12506552wv6.jpg
"columna 1" y "columna 2" tendran un ancho definido, pero no un alto (causante de esto, en "template"). En "columna 2" se encontrara el contenido de la pagina, por lo que sera de un alto independiente, entonces, el alto de "columna 1" dependera de el alto necesario para dicho contenido, en otras palabras, el alto de "columna 1" depende de el alto de "columna 2".
Para complicarla un poco mas, ambas capas estaran nuevamente subdivididas en 2 capas mas chicas.
http://img218.imageshack.us/img218/6659/41054714wf7.jpg
Donde en "side 1" y "side 2" habra dos imagenes....
Imaginemos un arbol, "side 1" contendria el extremo superior de dicho arbol, y "side 2" el inferior. Es importante que "side 2" este en la parte baja de "columna 1" (sin importar su alto), y a la ves, que "side 1" se encuentre siempre en la parte mas alta de dicha columna ("columna 1"). Entonces, al estirarse "columna 1" (recordemos, se debera estirar hasta el final de la pagina, acompañando a "columna 2"), el espacio entre "side 1" y "side 2" sera rellenado por el background de "columna 1", como lo indica la siguiente (y ultima) imagen.
http://img218.imageshack.us/img218/3716/44433719mw1.jpg
He aqui el problema:
* No logro que "columna 1" se estire hasta el final de la pagina, sin importar su altura.
* No puedo hacer que "side 2" siempre se ubique en la parte inferior de "columna 1".
Es todo, espero que lo hayan entendido. Se que quedo un poco extenso, pero trate de explicar lo mejor posible el problema, para evitar malos entendidos y falta de informacion.
Solo queda publicar las ultimas definiciones CSS con las que trate de solucionar esto.
Código :
#template {
width: 780px;
height: auto;
}
#header {
background-image: url(images/image_01.jpg);
background-repeat: no-repeat;
width: 780px;
height: 209px;
}
#menu {
background-image: url(images/image_02.jpg);
background-repeat: no-repeat;
width: 780px;
height: 66px;
}
#columna {
width: auto;
height: auto;
}
#columna_1 {
position: absolute;
left: 0px;
top: 275;
width: 199px;
height: inherit;
background-image: url(images/image_04.jpg);
background-repeat: repeat-y;
}
#columna_2 {
position: absolute;
left: 200px;
top: 275px;
width: 580px;
height: auto;
}
#side_1 {
width: 199px;
height: 448px;
}
#side_2 {
background-image: url(images/image_05.jpg);
display: block;
margin-bottom: 0px;
margin-top: auto;
width: 199px;
height: 69px;
}
#content_1 {
text-align: left;
width: 556px;
min-height: 520px;
height: auto;
margin-left: 15px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 20px;
}
#content_2 {
text-align: right;
width: 581px;
height: auto;
margin-bottom: 15px;
}
Espero respuestas, agradesco a todos por su tiempo.
Atte Matias.
use el mismo ejemplo para el 