Crecimiento de div

[monbesugo]

Muy buenas!

Resulta que estoy diseñando una web cuyo contenido será totalmente dinámico. Por este motivo estoy diseñando una plantilla con un tamaño de capas predefinido.

http://livinglavidaerasmus.com/com/pages/ficha.html

lo que sucede ahora es que el contenido que voy a meter dentro de las capas al ser totalmente dinámico va a hacer que me encuentre con situaciones como la que se vé en el diseño que os he pasado, que las capas TIENEN que crecer dependiendo del contenido que yo le pase a cada capa y lo que sucede es que el texto es visible pero se "chafan" unas capas a otras.

Espero que me deis alguna solución... empiezo a volverme loco!!!

[IsaBelM]

copia este css

span.descripcion {
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
p.desc_text{
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: justify;
}

h2.nom_prod {
color: #09F;
text-shadow: black 0.1em 0.1em 0.2em;
}

h3.nom_secc {
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
text-align:left;

}

#ficha {
height: auto;
width: 600px;
margin: 0 auto;
}
#ficha_derecha {
background-color: #09F;
float: right;
top: 0px;
height: 100%;
width: 200px;
}
#ficha_izq {
background-color: #FFF;
height: 100%;
width: 400px;
}
#presentacion {
color: #FFF;
height: 20px;
width: 160px;
margin-left: 20px;
}
#beneficios {
color: #FFF;
height: 40px;
width: 160px;
margin-left: 20px;
}
#principios {
font-style: italic;
color: #FFF;
height: 20px;
width: 160px;
margin-left: 20px;
}
#destinado {
color: #FFF;
height: 20px;
width: 160px;
margin-left: 20px;
}
#imagen {
color: #FFF;
height: 40px;
width: 160px;
margin-left: 20px;
}
#seccion {
font-style: italic;
color: #09F;
height: 20px;
width: 160px;
margin-left: 20px;
}
#ingredientes {
color: #09F;
height: 60px;
width: 360px;
margin-left: 20px;

}
#nom_prod {
color: #09F;
height: 40px;
width: 360px;
margin-left: 20px;
}
#descripcion {
color: #09F;
height: auto;
width: 360px;
margin-left: 20px;
}

y cambia el orden de los bloques

<div id="ficha">
<div id="ficha_derecha"></div>
<div id="ficha_izq"></div>
</div>

[monbesugo]

Muchas gracias!

ya no se me solapan los textos de la "ficha_izq" pero en la "ficha_derecha" sigo igual...

ahora subo los cambios a la misma url...

¿alguna solución para el div derecho?

[monbesugo]

Vale, ya esta claro... la solución esta en el height: auto;

Una pena porque si no crece el heigh yo quería que se mantuviera como estaba diseñado... en fin tampoco creo que sea de tan vital importancia.

Gracias ;)

[monbesugo]

Ahora me encuentro con otro par de problemillas...

http://livinglavidaerasmus.com/com/pages/ficha.html

http://livinglavidaerasmus.com/com/pages/ficha2.html

Lo que quiero es que toda la capa "ficha" se quede recuadrada con el borde que he puesto pero que incluya tambien la capa "ficha_derecha". Al ser más larga, no la "coge" el recuadro tal y como yo quiero.

El objetivo es que parezca una ficha de un producto. Además el apartado de Ingredientes necesito que este alineada en la parte de abajo de la capa "ficha_izq".

Y en ficha2, que al crecer el div_izq, el div_derecha crezca y tenga el color azul hasta abajo del todo, no sé si me explico...


¿Alguien puede echarme un cable? ¡SOLO ME QUEDA ESO!

Muchisimas gracias!

[IsaBelM]

estudia el código fuente de estas páginas

http://araudi.net/ejemplos/columnas_equilibradas.html

http://matthewjamestaylor.com/blog/e...s-2-column.htm

[monbesugo]

Casi lo tengo, pero me sale lo siguiente:

http://livinglavidaerasmus.com/com/pages/ficha2.html

la parte de la derecha tiene al final del todo un trozo blanco que no completa de azul... creo que me explico bien sobre todo tras ver el documento.

Muchas gracias por la ayuda! :)

[IsaBelM]

si has visto y entendido el código fuente de las ligas es bastante sencillo