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?
pantalaimon
hey! ... funciona! ... solo arreglé un par de cosas para adaptarlo a lo que tenia ya echo y funciono, gracias!
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.