posicion capas a la misma altura

[ZiTAL]

Hola a todos, me he decidido a hacer toda mi web mediante capas. El problema que tengo es que no se como poner a la misma altura el menu de la izquierda y el cuerpo, queria una cosa asi:

Código:

capa de arriba (titulo)
capa de la izquierda (menu) capa del cuerpo (cuerpo)
capa de abajo (creditos etc.)

Lo que no quiero es que tengan una anchura y altura predefinidos, haber si me podeis echar una mano.

De mientras sigo probando con el absolute y relative.

Muchas gracias.

[chem]

Buenas! Prueba a meter porcentajes en las medidas.

[gazpachoymochil]

Si quieres que estén a la misma altura y que ésta este predefinida (supongo que por tí) lo que debes hacer es colocar las capas del menú y el cuerpo en posiciones absolutas. Para ello tendrás que sacar números, es decir, deberás calcular cual es la posición idónea de estas capas para que la web esté estructurada y maquetada de forma correcta.

De todas formas, yo te aconsejo que no utilices esta forma de maquetar la web y pienses la posibilidad de que la web se estructure de forma "dinámica", es decir, emplea porcentajes para las medidas y no uses posiciones absolutas a no ser que sea estrictamente necesario, etc. Si quieres que el menú y el cuerpo de la web se sitúen debajo del título y una al lado de la otra...¿por qué no intentas esto?:

Código HTML:

<div id="titulo">xxx</div>
<div id="menu">xxx</div>
<div id="cuerpo">xxx</div> 

Y:

Código:

#titulo {posición absoluta o no para situal el titulo...}

#menu {
float: left;
width: 20%;
}

#cuerpo {
float: left;
width: auto; /* O, por ejemplo, 80% */
}

De esta forma, las capas irán encajando como un puzzle y sin tener que introducir manualmente la posición donde quieres situarlas.

Creo que, más o menos, me habré explicado bien, no?. Bueno, ya nos dirás como ha ido...

[ZiTAL]

Si funciona bien, pero me da que volvere por aqui para preguntar mas cosillas ;)

Muchas gracias.

[SiR.CARAJ0DIDA]

acabo de hacer algo parecido, te pego el codigo

Código HTML:

#left-menu {
	width:200px;
	float:left;
	_margin-right:-3px; /* IE BUG */
}
#main-content {
	overflow:auto;
}
#footer {
        clear:left;
}


...

<div id="header"></div>
<div id="left-menu"></div>
<div id="main-content"></div>
<div id="footer"></div>