Caja CSS

[shakaran]

Hola, quiero hacer una caja como la siguiente imagen:



He intentado hacer la estructura css pero no consigo que cada parte se queda bien y sobre todo que los laterales se redimensionen.

La estructura seria asi:

Código:

<div id="caja">
	<div id="encabezado">
		<div id="superior_izquierda">SI</div>
		<div id="superior_central">SC</div>
		<div id="superior_derecha">SD</div>
	</div>
	<div id="contenido">
		<div id="lateral_izquierda">LI</div>
		<div id="texto">T</div>
		<div id="lateral_derecha">LD</div>
	</div>
	<div id="pie">
		<div id="inferior_izquierda"><II/div>
		<div id="inferior_central">IC</div>
		<div id="inferior_derecha">ID</div>
	</div>
</div>

Como puedo hacerlo?

Gracias

[JHMorales]

Hola:
eso lo han llamado en inglés el Holygrail, la búsqueda de un método en css de poder hacer lo que tu pides sin problemas en los diferentes navegadores:

Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.

http://alistapart.com/articles/holygrail

Suerte, Jorge H.

[shakaran]

Le he estado un vistazo a los "holy grail" y se parece a lo que quiero pero no funciona. Y me explico.

En los holy grail si un lateral o la parte del centro (contenido) es mas grande que las otras, se agranda. Es justo eso lo que no necesito. Es decir si el contenido se agranda los laterales deben medir el mismo "height" y eso es lo que no cumplen o al menos no he visto que ahi lo expliquen.

En realidad el problema es solo eso. Que los laterales deben medir siempre la maxima altura que el contenido tenga.

como puedo hacer eso?

[soorellana]

Si no entiendo mal, quieres que el alto de tus capas sean iguales. Lo que me ha funcionado a mí es utilizar el siguiente código de JQuery.

Código:

<script type="text/javascript" src="js/jquery-latest.pack.js"></script>	
	<script type="text/javascript">
    $(document).ready(function(){
        if ($("div#column").height() > $("div#contenido").height()) {
            $("div#contenido").height($("div#column").height())
        }else{
            $("div#column").height($("div#contenido").height())
        };		
    });
</script>

Básicamente lo que hace esto ver cuál de las dos capas es más alta y ajustar la otra para que tengan el mismo alto.
Si quieres más información de JQuery visita: jquery.com

[JHMorales]

Hola:
lo que necesitas es esto:
http://alistapart.com/articles/fauxcolumns/
lo que sucede con los div es que si les pones un fondo este aparece hasta donde llegue el contenido en cada div. Con los faux columns lo que logra el autor es que el fondo (una imagen de pocos px de alta, con colores según el ancho de las columnas que quieres hacer) esté en un div externo que contiene los div (columnas) que quieres. De modo que ese div externo, con su fondo, crece todo lo que el div interno más grande lo haga y muestra el fondo que otro div interno por falta de contenido no genere, como si creciera igual. Suerte, Jorge H.

[shakaran]

Sorellana, tu solucion seria valida pero no eficiente, porque seria solo para una caja. El problema de aplicarlas a todas (y teniendo diferente id) seria muy costoso para el usuario, ya que ademas habria que ejecutar aun mas codigo de javascript. Personalemente no he indagado mucho sobre JQuery, pero utilizo las librerias de MooTools y practicamente existiria el mismo problema.

JHMorales, le he hechado un vistazo a los fauxcolumns y creo que solo serian validos para aplicarlos en el body, es decir, para estructuras de web con parte derecha e izquierda. No creo que se pueda generalizar a una estructura como la que planteo.

No se si tu puedas hacer algun ejemplo en este tipo de estructura, pero yo no le veo por donde meterle mano con los fauxcolums.

Un saludo

[JHMorales]

Hola:
he visto que tu código en el primer post en realidad es la misma estructura de las faux columns, pero con 3 columnas y además esa estructura de 3 columnas en el header y el footer. Prueba a ver si te sale, al ser una imagen lo que se repite hacia abajo da a entender que lo que hay que mantener fijo es el ancho en todos los div. Suerte, Jorge H.