Dos divs, uno de ancho fijo, el otro, el resto

Tengo dos contenedores div.

Si bien uno debe tener un ancho específico, necesito ajustarlo, de modo que el otro div ocupe el resto del espacio. ¿Hay alguna forma de que pueda hacer esto?

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

Ver: http://jsfiddle.net/SpSjL/ (ajustar el ancho del navegador)

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

También puede hacerlo con display: table, que suele ser un enfoque mejor: ¿Cómo puedo poner un elemento de entrada en la misma línea que su etiqueta?

Es 2017 y la mejor manera de hacerlo es usando flexbox, que es compatible 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>

Puede utilizar la función calc () de CSS.

Demostración: 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;   
}

¡¡Espero que esto te ayudará!!

Si puede cambiar el orden en el código fuente, puede hacerlo así:

HTML:

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

CSS:

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

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

Agregue un contenedor y puede hacerlo con su orden de código fuente actual y posicionamiento absoluto:

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

Aquí, el .leftdiv obtiene un ancho establecido implícitamente de los top, lefty rightestilos que le permite llenar el espacio restante en #container.

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

Si puede envolverlos en un contenedor en el <div>que podría usar el posicionamiento para <div>anclar el lado izquierdo left:0;right:250px, vea esta demostración . Diré ahora que esto no funcionará en IE6 ya que solo una esquina de a <div>puede posicionarse absolutamente en una página ( vea aquí para una explicación completa).

1- Tenga un div de envoltura, configure el relleno y el margen como desee
2- Haga que el div del lado izquierdo tenga el ancho que necesita y hágalo flotar hacia la izquierda
3- Establezca el margen del div del lado derecho igual al ancho del lado izquierdo

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

¡Espero que esto funcione para usted!

Hay bastantes formas de lograrlo, los márgenes negativos es uno de mis favoritos:

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

¡Buena suerte!

establezca su derecha en el ancho específico y flote, a su izquierda simplemente establezca el margen derecho en 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
}

Si necesita una solución de navegador cruzado, puede utilizar mi enfoque, claro y fácil.

.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 lo simple que esto puede ayudarte

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