Resolucion + Maquetacion

[Ronruby]

Saludos

Tengo una pequeña duda en cuanto a CSS.
Digamos que tengo lo siguiente:
http://img254.imageshack.us/my.php?image=capas1be7.jpg

Pero me gustaria que, por ejemplo, al agrandar la pantalla, la capa izquierda se quede del mismo tamaño, pero que la capa derecha cambie respecto al tamaño de la pantalla.
Algo asi:
http://img265.imageshack.us/my.php?image=capas2xl3.jpg

Para hacerlo con anchos fijos no tuve ningun problema, pero no puedo lograr el efecto que deseo para la capa derecha.

Lo que deseo para la capa de la derecha es que sea proporcional al tamaño de la ventana, es decir si yo tomo la ventana y la reduzco un poco, que entonces esta capa (incluyendo el header y footer) reduzcan mientras que la capa de la izquierda quedaria siempre de un tamaño fijo en Pixeles.

Alguna sugerencia?

[Mikmoro]

Esto lo normal es hacerlo poniendo la caja de la izquierda con un float: left y poniéndole un tamaño fijo, y la de la derecha sin float y sin tamaño.

Si muestras lo que tienes te podremos ayudar a arreglarlo.

[kseso?]

Como yo lo he visto hacer es a lo mismo que menciona Mikmoro (div a la izquierda con anchura fijada en px, y segundo div) contenidos los dos en un div con anchura en definida en %. Más elevado o menos, según el espacio libre que quieras tener en los laterales de la ventana del navegador.

Un saludo

[Ronruby]

Por ejemplo, tengo esto:

Código HTML:

<div style = "overflow:hidden; margin-left: auto; margin-right: auto; width:500px;">
    <div style = "height: 45px; width: auto;"></div>
    <div style = "float: left; height: 75px; width: 150px;"></div>
    <div style = "float: right; height: 75px; width: 350px;"></div>
    <div style = "clear: both; height: 45px; width: auto;"></div>
</div> 

Perfecto, funciona sin problemas.

Pero al tratar de hacer lo que ustedes me proponen (poner la capa de la derecha con un ancho en %), si reduzco la ventana lo suficiente, esta capa se pasa a la siguiente linea.
Al parecer tendre que trabajar con % en ambos lados.

[kseso?]

Para evitar eso, que colapse o pasen a la línea inferior, debes utilizar min-width (anchura mínima)
Aquí tienes una explicación

[Ronruby]

Gracias por la informacion ;)

He resuelto hecho justamente lo que queria agregandole un POSITION:RELATIVE a el DIV de la derecha y eliminando la propiedad: FLOAT:RIGHT

;) Muchas gracias.

Código HTML:

<div style = "overflow:hidden; margin-left: auto; margin-right: auto; width:auto;">
    <div style = "height: 45px; width: auto;"></div>
    <div style = "float: left; height: 75px; width: 182px; border:#006699 1px solid;"></div>
    <div style = "height: 75px; width: auto; border:#006699 1px solid; position:relative;"></div>
    <div style = "clear: both; height: 45px; width: auto;"></div>
</div> 

*Nota: el borde es solo para poder ver las capas en el navegador ;)

[kseso?]

Iniciado por Ronruby

Gracias por la informacion ;)

He resuelto hecho justamente lo que queria agregandole un POSITION:RELATIVE a el DIV de la derecha y eliminando la propiedad: FLOAT:RIGHT

;) Muchas gracias.

Iniciado por Mikmoro

Esto lo normal es hacerlo poniendo la caja de la izquierda con un float: left y poniéndole un tamaño fijo, y la de la derecha sin float y sin tamaño...

Claro, es lo que te indicaba Mikmoro en su respuesta.
Al no tener tamaño, tenderá a ocupar el espacio disponible (el que le queda libre) y al estar sin 'flotar' se posicionará según el flujo natural del archivo .html.

Me alegro de que hayas alcanzado puerto.
Un saludo

P.D.: supongo que el definir las propiedades de la forma que lo has hecho es sólo para las pruebas.
Creo que ya sabrás que se recomienda tener un archivo .css separado del código html.

[Ronruby]

P.D.: supongo que el definir las propiedades de la forma que lo has hecho es sólo para las pruebas.
Creo que ya sabrás que se recomienda tener un archivo .css separado del código html.

Asi es, solo lo hice para probar nada mas. ;)