CSS - Columnas de fluido fijo

Question

En el cuerpo de mi sitio, intento crear dos columnas: una en el extremo derecho con un ancho fijo (300 px) para anuncios, etc., y una a la izquierda que ocupará el espacio restante en la página. ¿Cómo se puede lograr esto en CSS?

Answer 1

CSS:

#right-column{ 
width:300px; 
float:right; 
} 

#other-column{ 
float:left; 
width:100%; 
padding-right:20px; /*to prevent text overlap as suggested in the comment*/ 
} 

En HTML:

<div id='right-column'> 
<!-- ads here --> 
</div> 
<div id='other-column'> 
<!-- content here --> 
</div> 

Answer 2

También puede ser que desee revisar la YUI: CSS Grid Builder. Es una interfaz web simple en la que se especifica el diseño de cuadrícula que se busca, y le proporcionarán el código html que puede usar en combinación con el YUI Grids CSS framework para obtener el diseño deseado. Una cosa buena del marco CSS de YUI Grids es que tiene good cross browser support, lo que le ahorra tiempo para que funcione en diferentes navegadores. También puede aplicar ingeniería inversa al código proporcionado por el generador de la cuadrícula para obtener algunas ideas sobre cómo puede hacerlo usted mismo. Los ajustes que desee utilizar con el Yui: CSS generador de cuadrícula para obtener su diseño deseado es el siguiente:

1. tamaño del cuerpo: 100%
2. Columnas del cuerpo: la barra lateral derecha 300 px

Answer 3

Aquí es una herramienta al generate fixed liquid columns para colocar anuncios de AdSense.

Answer 4

Una solución que he encontrado para esto es flotar la columna derecha a la derecha y dar a la columna izquierda una posición absoluta con la izquierda: 0 y derecha: 300px. Esto lo hará fluido como si le diera un ancho: 80%, pero será relativo al contenedor principal de una manera diferente.

He aquí un ejemplo: http://jsfiddle.net/tkane2000/dp9GZ/

Una cuestión que puede encontrar con esto es que ya que es absoluta, no va a empujar hacia abajo de forma natural los elementos por debajo de ella.

Otra posible solución sería dar a la columna de la izquierda ancho: 100% almohadilla-derecha: 300px;

y la columna de la derecha (ancho fijo): posición: absoluta: arriba: 0; derecha: 0;

Es posible que tenga que establecer el tamaño del cuadro: cuadro de la frontera en la columna de la izquierda.

Esto también como algunas limitaciones. Uno que viene a la mente, es que si quisieras que la columna de la izquierda tuviera un borde-derecha para separar cada uno, el borde estaría en el lado equivocado de la columna de la derecha.

Answer 5

CSS:

.column-right { 
    float: left; 
    width: 100%; 
    height: 200px; 
    background-color: red; 
} 

.column-right .column-content { 
    margin-left: 250px; 
} 

.column-left { 
    float: left; 
    margin-left: -100%; 
    width: 250px; 
    height: 200px; 
    background-color: green; 
} 

HTML:

<div class="column-right"> 
    <div class="column-content"> 
     <strong>Right Column:</strong><em>Liquid</em> 
    </div> 
</div> 
<div class="column-left"> 
    <strong>Left Column:</strong><em>250px</em> 
</div>