CSS: Dos campos, uno izquierdo ancho flexible, uno derecho ocupa el espacio restante

Question

------------- -------------------------------------------------- 
| some text | | some more text, sometimes more, sometimes less | 
------------- -------------------------------------------------- 

|<------------------------- 100% width ----------------------->| 

Así que tengo el diseño anterior. El cuadro de la izquierda siempre debe ser lo más pequeño posible, mientras que el derecho debe ocupar el espacio restante. Eso normalmente estaría bien con un float: left.

El problema es que el cuadro de la derecha puede crecer mucho, mientras que el izquierdo es más o menos la garantía de ser muy pequeño (sin embargo, varía en tamaño, por lo que debe ser flexible). Si el cuadro de la derecha crece, necesito que se comporte de esta manera:

------------- -------------------------------------------------- 
| some text | | quite a lot of text, actually, really quite a | 
------------- | bunch of it, you could say this is really  | 
       | quite a heck of a lot of text     | 
       -------------------------------------------------- 

Si uso un float:left, el cuadro de la derecha se alineará a la ruptura bajo el cuadro de la izquierda si contiene una gran cantidad de texto:

------------- 
| some text |           (not good) 
------------- 
---------------------------------------------------------------- 
| quite a lot of text, actually, really quite a bunch of it, | 
| you could say this is really quite a heck of a lot of text | 
---------------------------------------------------------------- 

Si utilizo una tabla para ambos en su lugar, el cuadro de la izquierda puede crecer innecesariamente si ambos contienen muy poco texto:

             (not good) 
-------------------------------- ------------------------------- 
| some text     | | not that much text   | 
-------------------------------- ------------------------------- 

por otra parte, no se supone que el cuadro de la izquierda a la línea de rotura. Pero dado que contiene algunos elementos HTML, no solo texto puro, un no-wrap no parece funcionar en todos los navegadores.

¿Cuál es una buena solución a este problema?

EDITAR

En realidad no es terriblemente importante que el cuadro de la derecha ocupa el ancho restante, sólo que siempre permanece unida a la parte derecha del cuadro de la izquierda.

Answer 1

Para la caja de la derecha use overflow: hidden; width: auto; en lugar de flotar. Eso debería tomar el espacio restante sin caer debajo, sin importar cuánto contenido haya. Continúa flotando el cuadro de la izquierda.

Answer 2

Defina un ancho fijo en la columna izquierda, así como float:left; ponerlo después de la columna principal en el HTML

Dos divs para la columna de la derecha; el exterior también flotó hacia la izquierda y con un ancho del 100%, el interior con un margen izquierdo del mismo ancho que la columna izquierda.

Answer 3

Como Stobor sugirió: Trate de poner el cuadro de la izquierda dentro del cuadro de la derecha

<div id="rightBox"> 
    <div id="leftBox">This text will expand the left box</div> 
    <div style="float:left"> 
     Content of right box goes here<br> 
     Breaking even works... 
    </div> 
</div> 

CSS:

#rightBox { 
    width: 100%; 
    background: red; 
} 
#leftBox { 
    width: auto; 
    float: left; 
    background: blue; 
} 

funciona para mí.

Answer 4

Si está utilizando una solución de CSS pura, creo que tendrá que dar a una de las columnas algún tipo de restricción de ancho. ¿Definitivamente no puede ser un porcentaje como se sugiere arriba?

El problema es 2 veces. Si flota una columna y le da a la otra un ancho del 100%, porque la columna flotante se elimina del flujo de documentos, el ancho del 100% de la otra es el ancho total de la ventana gráfica (ignora el div flotante). Si flotas ambos sin establecer el ancho del segundo div, el div se reducirá (debería) al ancho de su elemento hijo más ancho. the w3c spec quizás de alguna ayuda, aunque no es la lectura más fácil.

Siempre puedes intentar usar javascript para leer el ancho de la ventana gráfica y luego establecer el ancho de las columnas, de lo contrario, creo que vas a tener problemas.

Answer 5

También puede intentar configurar la pantalla del contenedor a la tabla, y los elementos secundarios a la celda de la tabla. Luego puede establecer un ancho y alto de un div como valores de píxel fijos, y el otro ancho de div (dinámico) al 100%.

<style> 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

#container{ 
    border: solid #222 1px; 
    width: 400px; 
    height: 360px; 
    resize: both; 
    overflow: auto; 
} 

#wrap{ 
    border: solid red 1px; 
    width: 100%; 
    height: 100%; 
    display: table; 
    resize: both; 
    overflow: auto; 
} 

video{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 160px; 
    height: 160px; 
} 

#list{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
} 
</style> 
<div id="container"> 
    <div id="wrap"> 
    <video controls></video> 
    <br> 
    <div id="list"></div> 
    </div> 
</div> 

¡Tira ese perrito en un ahi!

ps: no está seguro de cómo hacer esto verticalmente aunque :(

EDITAR !!!

VERTICAL: * { webkit-box-dimensionamiento: frontera-box; -moz- cuadro de dimensionamiento: frontera-box; cuadro de dimensionamiento:?-cuadro de frontera; }

#container{ 
    border: solid #222 1px; 
    width: 400px; 
    height: 360px; 
    resize: both; 
    overflow: auto; 
} 

#wrap{ 
    border: solid red 1px; 
    width: 100%; 
    height: 100%; 
    display: table; 
    resize: both; 
    overflow: auto; 
} 

video{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 160px; 
    height: 160px; 
} 

#median{ 
    display: table-row; 
    width: 100%; 
} 

#list{ 
    border: solid #222 4px; 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
} 
</style> 
<div id="container"> 
    <div id="wrap"> 
    <video controls></video> 
    <div id="median"></div> 
    <div id="list"></div> 
    </div> 
</div>