CSS: Centrado, fluido a la izquierda, fijo a la derecha, disposición ordenada por fuente con ancho mínimo/máximo

Question

Los títulos lo dicen. Quiero un diseño CSS 2-columna que: se centra

• - el contenido principal se centra en la página
• tiene un fijo (píxel) de ancho de columna derecha
• tiene una columna de fluido izquierda - utiliza hasta todo el espacio disponible menos el ancho de la columna derecha
• es fuente ordenaron - el contenido columna de la izquierda se presenta ante el contenido de la columna derecha en el código HTML
• permite un ancho mínimo - 760px en mi ejemplo
• permite un ancho máximo - 10 24px en mi ejemplo

Si la ventana es mayor que el ancho máximo, el contenido se centrará en la página en el valor máximo. Si la ventana es más pequeña que el ancho máximo, el contenido ocupa el 100% de la página, a menos que sea más pequeño que el ancho mínimo, lo que haría que aparezca la barra de desplazamiento horizontal.

Estoy dispuesto a utilizar algunos javascript menores para manejar el ancho mínimo/máximo de los navegadores que no admiten esas propiedades (te estoy viendo IE6), pero estoy tan dispuesto a dejar que esa parte del diseño degradar.

Es drop-drop simple con tablas. He visto literalmente cientos de diseños de ejemplo, y nada puede hacer todas las cosas que estoy pidiendo, aunque hay varios que se acercan. El problema parece ser obtener una columna izquierda fluida y ordenar la fuente en el mismo estilo. He encontrado varios ejemplos de un derecho fijo a la izquierda/fluido (opuesto a lo que deseo) con el orden de fuente adecuado, o fluido a la izquierda/fijo a la derecha sin orden de origen, pero no a ambos.

No me importa si usa flotantes o márgenes negativos, pero me gustaría evitar el posicionamiento absoluto.

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

recomiendo echar un vistazo a las CSS templates at Dynamic Drive. El quinto abajo debe ser lo que estás buscando (Fluid-Fixed). Simplemente agregue max-width y min-width al elemento contenedor principal y debe estar todo listo.

FYI, estas son muy buenas plantillas para usar como base para los diseños de página. Jugar con CSS es una gran manera de aprender mucho sobre carrozas y posicionamiento, y realmente me ayudó en mis primeros días de desarrollo web.

Answer 2

¿Estás buscando algo como esto? (Márgenes + flotadores + fin fuente adecuada negativo + fija derecha)

http://blog.html.it/layoutgala/LayoutGala23.html

Más diseños en la página de índice: http://blog.html.it/layoutgala/

Y a continuación, sólo anexar min/max anchura al recipiente.

Answer 3

Mi intento: http://www.ryankinal.com/fluid/

No funciona por completo, aunque eso es sólo porque a muy pequeños tamaños de ventana, mis márgenes negativos pueden hacer que el contenido caiga fuera de la página.Aquí está la teoría:

1. recipiente en algún porcentaje
2. columna de la izquierda en 100% de contenedor, y flotó dejó
3. columna derecha envuelto en 0% anchura, flotar-derecha envoltura columna
4. derecha en fijo anchura (200 píxeles en mi ejemplo)
5. columna de la izquierda y los márgenes de las columnas izquierda y derecha de la mitad de la anchura de la columna de la derecha (100px en mi ejemplo)

Por lo tanto, cuanto mayor es la columna de la derecha, es más probable que el contenido se caiga. Pero eso es lo más cerca que he llegado en una buena hora más o menos. También es un poco hackish debido a envolver la columna derecha en un div extraño y aprovechar el desbordamiento: visible.

Pero ellos son mis duques (por ahora).