Estructura..

[mariomon17]

Hola a todos, nose como maquetar esto:
tengo un div donde meto todo:
-un top con un background
-a los laterales dos divs con distinto backgruon
-al pie otro div con otro background
-en el centro de todo es donde esta mi web.

los laterales estan puesto q se repita el fondo en y. y el height esta en auto.
el centro (donde esta la web) el height esta en auto tambien.

------------
Lo que quiero es que al escribir en el centro, aumenta el height, pues aumente el height de los div's laterales. No se si me explico.

[Triby]

Busca "Columnas equilibradas" en www.araudi.net, todo lo que tienes que hacer es ver el codigo fuente, guardarlo y adaptarlo a tus necesidades.

[mariomon17]

Wow, funciona¡¡
el problema es que yo tengo tres columnas y no se como adaptarlo,
Alguien me ayuda¿?
Gracias,

[Triby]

Revisaste el "Diseño liquido de 3 columnas"?, es muy similar a lo que quieres, solo tienes que adaptarlo.

[mariomon17]

Uhhh¡ nuse q ago mal pero ahora esta peor, mira...

marcre.awardspace.com

[daPhyre]

Si el ancho es estático, ¿No sería más sencillo hacer un fondo que ocupe todo el largo para el div central? De esa forma te dejarías de preocupar por algunos problemas de este tipo.

[mariomon17]

Ya, pero el problema esq no sera estatico en el futuro...

[daPhyre]

Encontré el problema: Ni left ni right tienen altura, por lo cual sin contenido, la altura por defecto es 0.

[daPhyre]

Y... En tiempo récord de 20 minutos, encontré la solución a tu problema.

Cambia el HTML de esta forma:

Código HTML:

<DIV class="left">
<DIV class="right">
<DIV class="middle">
  <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat quam at magna dignissim dignissim. Maecenas porta ligula non nisl iaculis commodo. Curabitur lacinia urna sed magna tincidunt sit amet dignissim elit lobortis. Phasellus vitae massa libero, sed sagittis justo. Praesent eu dolor ipsum. Praesent risus dui, auctor nec tempor nec, adipiscing mollis erat. Cras a ultrices mi. Vestibulum bibendum venenatis convallis. Suspendisse lobortis consectetur velit ac egestas. Ut enim lacus, elementum id scelerisque id, venenatis nec odio. Aliquam pulvinar tempus consequat. Maecenas vulputate enim sit amet justo rhoncus vitae consectetur diam tincidunt. Sed ultricies quam molestie justo accumsan blandit. Mauris quis orci at libero euismod porta non quis leo. Duis eu purus vitae nisl porttitor iaculis quis in nunc. Mauris dui dui, porta quis dictum non, tempus vitae libero.</P>
</DIV></DIV></DIV> 

Y el CSS correspondiente así:

Código:

.left {background:url(images/izq.png) repeat-y top left;}
.right {background:url(images/derecha.png) repeat-y top right;}			 
.middle {width:896px;
	background:#fff;
	margin:0 auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px
}

Espero te sirva. Solo una pregunta... Si posteriormente no va a ser estático... ¿Cómo arreglarás lo que son imágenes superior e inferior?

[mariomon17]

Ohhhhh....
WooooW¡
Muchiiiiisimas gracias....

[mariomon17]

Iniciado por daPhyre

Espero te sirva. Solo una pregunta... Si posteriormente no va a ser estático... ¿Cómo arreglarás lo que son imágenes superior e inferior?

Pues adaptare esto al horizonta....

Un saludo¡

[mariomon17]

Lo que no entiendo es que el middle no se cambie el widht...
y sigue teniendo el mismo tamaño
qiero decir, antes era:
-left + middle + right

y ahora es:
-left
--right
---middle

[daPhyre]

Por eso el margin:0 auto, deja margen de ambos lados para que se vean los fondos.

[mariomon17]

Gracias....