How to make a column occupy the rest of the available space?

Question

I would like to put two blocks inside a div of parallel size, one with fixed size, and the other that fits exactly in the remaining space.

For example :

div#container {
  width: 50%; /* este tamanho se altera */
  height: 100px;
}

#esquerdo {
  width: 100%
  height: 100px;
}
#direito {
  width: 40px;
  height: 100px;
}

I want the blocks #left and #right side by side filling the container. see here : http://jsfiddle.net/nmqhyuz3/

What should I do?

Answer 1

You can do this with Flexbox:

1. Make the #container have flex layout:

   div#container {
       display: flex;
   

2. The element on the left, whose size should occupy as much of the available space, you establish that it grows freely:

   #esquerdo {
       /*width: 100%*/
       flex-grow: 1;
   

3. The one on the right is unchanged - the default value for flex-grow is zero, so it will not grow beyond the given width.

Example in jsFiddle.

Answer 2

It is possible to do this with float, simply change the order of the elements in the HTML... the direito should come first and the esquerdo afterward:

/* ESTILOS IMPORTANTES PARA A RESPOSTA */
#esquerdo {
    height: 100px;
    overflow: hidden;
}
#direito {
    width: 50px;
    height: 100px;
    float: right;
}


/* ESTILOS AUXILIARES */
#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
}
#esquerdo {
    background-color: red;
    overflow: hidden;
    border: 2px solid darkred;
    box-sizing: border-box;
}
#direito {
    background-color: yellow;
    border: 2px solid darkolivegreen;
    box-sizing: border-box;
}

<div id="container">
    <div id="direito">direito</div>
    <div id="esquerdo">esquerdo</div>
    container
</div>

Answer 3

I’ll give you one more option using, using display:grid and how grid-template-columns: auto 50px; I leave the left column wide auto, 100% of the available space, and the right column has value fixo de 50px.

Code referring to image above

#container {
    border: #000000 solid 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    position: inherit;
    background-color: #eff2ff;
    display: grid;
    /* aqui eu defino que o Grid tem Duas colunas uma com width:auto e outra com 50px */
    grid-template-columns: auto 50px; 
}
#esquerdo {
    vertical-align: top;
    height: 100px;
    background-color: red;
    display: inline-block;
}
#direito {
    vertical-align: top;
    height: 100px;
    background-color: yellow;
    display: inline-block;
}

    

<div id="container">
    <div id="esquerdo"></div>
    <div id="direito"></div>
</div>