¿Cómo agregar un div de ancho fijo al lado de un div de ancho automático?

Question

Actualmente tengo un div con ancho: automático para llenar todo el ancho de la pantalla, pero quiero poner una barra lateral en el lado derecho. Cuando floto el ancho: auto div izquierda y div ancho fijo a la derecha que va debajo en su lugar. Básicamente estoy buscando algo similar a lo que tiene reddit con la barra de búsqueda en el ancho correcto, el contenido se ajusta automáticamente al ancho de la página. Gracias

Answer 1

Puede que sea así:

Digamos que tiene esos 2 divs dentro de un contenedor primario, que se expande para ajustarse a la página:

<div id="container"> 

    <div id="autowidth">text expands her...</div> 

    <div id="fixed">This is a fixed column</div> 

</div> 

En tu CSS:

#container { 
    width:100%; 
    border:1px solid black; 
    padding-right:200px; 
} 

#autowidth{ 
    width:100%; 
    background-color:red; 
    float:left; 
} 
#fixed{ 
    width:200px; 
    background-color:green; 
    float:right; 
    margin-right:-200px; 
} 

Básicamente, el contenedor principal mantiene todo junto. Tiene un relleno de 200px (el ancho de la columna derecha), por lo que su contenido no va más allá de ese punto. A su vez, la columna derecha tiene un margen de -200px, por lo que fuerza los límites impuestos por el relleno principal y se ubica siempre en la parte superior derecha. El otro div, en realidad, ahora solo tiene los espacios proporcionados por el contenedor padre, restringido por su relleno, por lo que su 100% sería, de hecho, (100% - (relleno de los padres)). Puede ver un resultado de trabajo aquí: jsfiddle.

Estoy bastante seguro de que podría haber soluciones más elegantes por ahí, tan desnudo conmigo.

si se quiere dar un fondo, al igual que se tratara de 2 cols, puede ir para el fondo de los clásicos 'columnas de imitación' (véase el ejemplo en a list apart)

Answer 2

No es necesario estrictamente un contenedor div. Hice css en línea por brevedad.

<div style="float:right; width:14em; background-color:#CCC;"> 
    <p>This div is fixed-width.</p> 
</div> 
<div style="background-color:#EEE; margin-right:14.5em;"> 
    <p>This div is auto-width.</p> 
</div>

Answer 3

La respuesta no funciona para mí, creo que está desactualizada. Ahora tiene que especificar el tamaño del cuadro: border-box para el relleno para contar el ancho, pero gracias por la inspiración. Esta es mi solución.

#autowidth { 
    float:left; 
    width:100%; 
    padding-right:200px; 
    box-sizing:border-box; 
} 

#fixed { 
    float:right; 
    width:200px; 
    margin-left:-200px; 
}