Duda de maquetación en CSS. Div Scroll al 100% Width
Hola!
Tengo un problema que me ha liado todo el día, necesito:
Sitio a dos columnas, donde:
1.- La primera esta estática y no se desplaza si se usa el scroll del navegador, ademas debe tener un ancho de 400px pero alto ajustable a altura de navegador.
2.- La segunda que es la de contenido, funcione con scroll, además esta segunda col. debe ocupar lo que queda de ancho de la ventana, ajustandose a esta manteniendo el scroll siempre al lado derecho y al borde. Y el alto al 100% para que nunca aparezca un segundo scroll en la ventana principal.
3.- Y ambas columnas, o div. Deben compartir el mismo background.
He pensado en algo asi:
<div id="contenedor de bg">
<div id="columna_1"></div>
<div id="columna_2"></div>
</div>
Y el CSS:
#contenedor de bg { position:relative; }
#columna_1 { width: 400px;
height: 500px;
float:left;
}
#columna_2 {
width: auto;
height: 500px;
overflow: auto;
padding: 10px;
position:relative;
}
Pero no se si realmente es lo correcto... hay alguna forma de hacerlo mejor?
Trazo
En el HTML:
<div id="columna1"></div>
<div id="columna2"></div>
En el CSS :
html , body , div#columna1 , div#columna2 { height: 100% }
div#columna1 {
width: 400px ;
background-color:#C30 ;
float: left ;
}
div#columna2 {
background-color:#9CC ;
margin-left: 400px ;
overflow: auto ;
}
· El margen asignado a body debe ser cero. Normalmente eso se incluye en el reseteo previo de los valores preestablecidos de las propiedades CSS.
· El background común que comentas, sea imagen de fondo, color de fondo o ambas propiedades, iría asignado a body.
· Si quieres personalizar el aspecto del scroll que aparecerá cuando los contenidos de columna2 sean más altos que la ventana puedes utilizar por ejemplo el plugin de jQuery jScrollPane.
pantalaimon
hey! ... funciona! ... solo arreglé un par de cosas para adaptarlo a lo que tenia ya echo y funciono, gracias!