Problema con la estructura de un template.

[ugNexus]

Hola ! Luego de dias de buscar una solucion al siguiente problema, me he rendido... Creo que los 'estandares' aun no son muy estandares, o al menos, muchas veces no funcionan como deberian (o esperamos que lo hagan). En este caso es en cuanto a CSS. En cuestion, el problema es el siguiente...

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.

[Roly]

podes poner el html? asi lo pruebo en mi maquina y te doy una mano

[ugNexus]

Código HTML:

<div id="template">
	<div id="header"></div>
	<div id="menu"></div>
	<div id="columna">
		<div id="columna_1">
			<div id="side_1" style="background-image: url(images/image_03.jpg'; ?>)"></div>
			<div id="side_2"></div>
		</div>
		<div id="columna_2">
			<div id="content_1">
				Contenido ! Contenido ! Contenido ! Contenido ! Contenido ! 
			</div>
			<div id="content_2">
				Copyright - Copyright - Copyright
			</div>
		</div>
	</div>
</div> 

Gracias.

[Roly]

fijate si te sirve este codigo que arme:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
body{
height: 100%;
margin: 0;
padding: 0;
}
.pricipal {
width:760px;
}
.header {
height:160px;
background-color:#999999;
}
.menu {
height:60px;
background-color:#666666;
}
.colLeft{
float:left;
width:260px;
background-color:#CCCC99;
height:auto;
}
.side1{
height:100px;
background-color:#CC33FF;
float:left;
width:260px;
}
.side2{
height:50px;
background-color:#FFCC33;
position: absolute;
bottom: 0;
float:left;
width:260px;
}
.colRight{
float:right;
width:500px;
background-color:#66CC33;
}
.content1 {
height:300px;
background-color:#00CCFF;
}
.content2 {
height:100px;
background-color:#00CC33;
position: absolute;
bottom: 0;
width:500px;
}
</style>
</head>

<body>
<div class="pricipal">
<div class="header">Header</div>
<div class="menu">Menu</div>
<div class="side1">side 1</div>
<div class="colRight">
<div class="content1">cont1</div>
<div class="content2">cont2</div>
</div>
<div class="side2">side2</div>


</div>
</body>
</html>

[ugNexus]

Ya logre solucionar el problema... Era mas complicado de lo que pensaba....
Gracias !