CSS: due campi, sinistra una larghezza flessibile, a destra uno spazio rimanente

Question

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

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

Quindi ho il layout di cui sopra. La casella di sinistra dovrebbe essere sempre la più piccola possibile, mentre quella di destra dovrebbe occupare lo spazio rimanente. Questo normalmente andrebbe bene con uno float: left.

Il problema è che la casella giusta può crescere un bel po ', mentre la sinistra è praticamente garantito per essere molto piccolo (ancora varia in termini di dimensioni, quindi ha bisogno di essere flessibili). Se la casella giusta cresce, ho bisogno di comportarsi in questo modo:

------------- -------------------------------------------------- 
| 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     | 
       -------------------------------------------------- 

Se io uso un float:left, la casella di destra si schiererà-break sotto la casella di sinistra se contiene molto testo:

------------- 
| 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 | 
---------------------------------------------------------------- 

Se io uso un tavolo per entrambi, invece, la casella di sinistra possa crescere inutilmente se entrambi contengono pochissimo testo:

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

Inoltre, la casella di sinistra non dovrebbe linea-break. Ma dal momento che contiene alcuni elementi HTML, non solo testo puro, un no-wrap non sembra funzionare in tutti i browser.

Qual è una buona soluzione a questo problema?

EDIT

In realtà non è terribilmente importante che la casella di destra occupa la larghezza residua, solo che è sempre rimane agganciato al lato destra della casella a sinistra.

Answer 1

Per la casella corretta utilizzare overflow: hidden; width: auto; anziché mobile. Questo dovrebbe occupare lo spazio rimanente senza scendere sotto, non importa quanto contenuto ci sia. Continua a fluttuare nella casella di sinistra.

Answer 2

Definire una larghezza fissa sulla colonna sinistra e float:left; mettilo dopo la colonna principale nell'HTML

Due div per la colonna di destra; quello esterno fluttuava anche a sinistra e con larghezza del 100%, l'interno con un margine sinistro della stessa larghezza della colonna sinistra.

Answer 3

Come Stobor suggerito: Prova a mettere la casella a sinistra dentro la scatola giusta

<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; 
} 

funziona per me.

Answer 4

Se si utilizza una soluzione di css pura, penso che si dovrà assegnare a una delle colonne una sorta di limite di larghezza. Può sicuramente non essere una percentuale come suggerito sopra?

Il problema è di 2 volte. Se si fa fluttuare una colonna e si dà l'altra una larghezza del 100%, poiché la colonna fluttuante viene rimossa dal flusso del documento, la larghezza del 100% dell'altro corrisponde alla larghezza della finestra completa (ignora il div floated). Se si fa fluttuare entrambi senza impostare la larghezza del secondo div il div dovrà (dovrebbe) ridursi alla larghezza del suo elemento figlio più largo. the w3c spec forse di qualche aiuto, anche se non è la lettura più facile.

Si può sempre provare a utilizzare javascript per leggere la larghezza della vista e quindi impostare le larghezze della colonna, altrimenti penso che si stia andando a fatica.

Answer 5

È anche possibile provare a impostare la visualizzazione del wrapper sulla tabella e gli elementi figlio sulla cella della tabella. Quindi è possibile impostare la larghezza e l'altezza di un div come valori di pixel fissi e l'altra (dinamica) div width 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> 

Gettare quel cucciolo in un!

ps: non è sicuro come fare questo in verticale tho :(

EDIT !!!

VERTICALE: * { -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; 
} 

#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>