Home / Questions / 22098
Accepted
devconcept
Asked: 2020-08-31 10:19:40 +0800 CST 2020-08-31 10:19:40 +0800 CST

How to allocate page width between elements using CSS

  • 772

I have the following problem that has me stumped. I want to place a couple of elements, one that has a series of buttons inside, and another that takes up the rest of the available size.

This image illustrates the result I want to reach

Example

<div class="contenedor">
    <div class="contenido">
        <!-- Debe ocupar el resto del espacio -->
    </div>
    <div class="botones">
        <!-- De acuerdo al texto y los botones puede ser más ancho pero siempre es fijo -->
        <button>Ok</button>
    </div>
</div>

It seems like a simple task but it is not. The root of the problem is that the container must have width: 100%;so that it occupies all the available width and after the button or buttons occupy their size, the rest must be occupied by the other container.

I have already tried using displayandwidth: 100%

.contenedor {
  width: 100%;
}
.contenido {
  display: inline-block;
  width: 100%;
  background-color: blue;
}
.botones {
  display: inline-block;
  background-color: violet;
}
<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

It obviously didn't work since the widthen %is relative to the parent and takes up all the space.

I also tried withcalc

.contenedor {
  padding: 0;
  margin: 0;
  width: 100%;
}
.contenido {
  padding: 0;
  margin: 0;
  display: inline-block;
  width: calc(100% - 124px);
  background-color: blue;
}
.botones {
  padding: 0;
  margin: 0;
  width: 120px;
  display: inline-block;
  background-color: violet;
}
<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

But that solution does not work for me since I have to force a fixed size and the elements may not fit.

How could I achieve such a layout?

I would prefer to achieve this without using flexboxneither calc, nor any of the experimental properties to make it as compatible as possible.

html

1 Answers

  1. Best Answer

    In my experience, the closest thing (without flexbox) would be to make the container and its content behave like "tables", you can also give it certain widths if you want:

    .contenedor {
  display: table;
  width: 100%;
}
.contenido {
  display: table-cell;
  background-color: blue;
}
.botones {
  display: table-cell;
  background-color: violet;
  white-space: nowrap;
  width: 1px;
}
    <div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

    • 5