Due div, uno a larghezza fissa, l'altro, il resto

Ho due contenitori div.

Anche se uno deve essere di una larghezza specifica, devo regolarlo, in modo che l'altro div occupi il resto dello spazio. C'è un modo per farlo?

.left {
    float: left;
    width: 83%;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    margin-right: 10px;
    overflow: auto;
}

.right {
    float: right;
    width: 16%;
    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;
}

<div class="left"></div>
<div class="right"></div> <!-- needs to be 250px -->

Vedi: http://jsfiddle.net/SpSjL/ (regola la larghezza del browser)

HTML:

<div class="right"></div>
<div class="left"></div>

CSS:

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}

Puoi anche farlo con display: table, che di solito è un approccio migliore: come posso mettere un elemento di input sulla stessa riga della sua etichetta?

È il 2017 e il modo migliore per farlo è usare flexbox, che è compatibile con IE10 + .

.box {
  display: flex;
}

.left {
  flex: 1;  /* grow */
  border: 1px dashed #f0f;
}

.right {
  flex: 0 0 250px; /* do not grow, do not shrink, start at 250px */
  border: 1px dashed #00f;
}

<div class="box">
  <div class="left">Left</div>
  <div class="right">Right 250px</div>
</div>

È possibile utilizzare la funzione calc () dei CSS.

Demo: http://jsfiddle.net/A8zLY/543/

<div class="left"></div>
<div class="right"></div>

.left {
height:200px;
width:calc(100% - 200px);
background:blue;
float:left;
}

.right {
width:200px;
height:200px;
background:red;
float:right;   
}

Spero che questo ti aiuti !!

Se puoi invertire l'ordine nel codice sorgente, puoi farlo in questo modo:

HTML:

<div class="right"></div> // needs to be 250px    
<div class="left"></div>

CSS:

.right {
  width: 250px;
  float: right;
}   

Un esempio: http://jsfiddle.net/blineberry/VHcPT/

Aggiungi un contenitore e puoi farlo con il tuo attuale ordine del codice sorgente e il posizionamento assoluto:

HTML:

<div id="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS:

#container {
  /* set a width %, ems, px, whatever */
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  right: 250px;
}

.right {
  position: absolute;
  background: red;
  width: 250px;
  top: 0;
  right: 0;
}

Qui, il .leftdiv ottiene una larghezza implicitamente stabilito dai top, lefte rightstili che permette di riempire lo spazio rimanente in #container.

Esempio: http://jsfiddle.net/blineberry/VHcPT/3/

Se puoi avvolgerli in un contenitore <div>puoi usare il posizionamento per <div>ancorare la sinistra a left:0;right:250px, guarda questa demo . Dirò ora che questo non funzionerà in IE6 poiché solo un angolo di a <div>può essere posizionato in modo assoluto su una pagina ( vedi qui per una spiegazione completa).

1- Avere un div wrapper, impostare il padding e il margine come preferisci
2- Rendi il div del lato sinistro la larghezza di cui hai bisogno e
fallo fluttuare a sinistra 3- Imposta il margine div del lato destro uguale alla larghezza del lato sinistro

.left
{
    ***width:300px;***
    float: left;
    overflow:hidden;

}

.right
{
    overflow: visible;
    ***margin-left:300px;***
}



<div class="wrapper">
    <div class="left">
        ...
    </div>

    <div class="right" >
        ...
    </div>

</div>

Spero che questo funzioni per te!

Ci sono diversi modi per ottenere risultati, i margini negativi sono uno dei miei preferiti:

http://www.alistapart.com/articles/negativemargins/

In bocca al lupo!

imposta il tuo diritto alla larghezza specifica e fallo fluttuare, alla tua sinistra imposta semplicemente il margine destro a 250px

.left {
vertical-align: middle;
min-height: 50px;
margin-right: 250px;
overflow: auto

}

.right {
width:250px;
text-align: right;
display: table-cell;
vertical-align: middle;
min-height: 50px;
height: 100%;
overflow: auto
}

Se hai bisogno di una soluzione cross browser, puoi usare il mio approccio, chiaro e facile.

.left{
        position: absolute;
        height: 150px;
        width:150px;
        background: red;
        overflow: hidden;
        float:left;
}
.right{
        position:relative;
        height: 150px;
        width:100%;
        background: red;
        margin-left:150px;
        background: green;
        float:right;
}

Usa il semplice questo può aiutarti

<table width="100%">
    <tr>
         <td width="200">fix width</td>
         <td><div>ha ha, this is the rest!</div></td>
    </tr>
</table>