3

Tengo el siguiente problema que me tiene desconcertado. Quiero ubicar un par de elementos, uno que tiene una serie de botones dentro y otro que ocupe el resto del tamaño disponible.

Esta imagen ilustra el resultado al que quiero llegar

Ejemplo

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

Parece una tarea sencilla pero no lo es. La raíz del problema es que el contenedor debe tener width: 100%; para que ocupe todo el ancho disponible y luego que el botón o los botones ocupen su tamaño, el resto debe ocuparlo el otro contenedor.

He probado ya usando display y width: 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>

Evidentemente no funcionó ya que el width en % es con respecto al padre y se toma todo el espacio.

También probé con calc

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

Pero no me sirve esa solución ya que tengo que obligar un tamaño fijo y puede que no me quepan los elementos.

¿Cómo pudiera lograr dicho layout?

De preferencia quisiera lograrlo sin usar flexbox ni calc, ni ninguna de las propiedades experimentales para hacerlo lo más compatible posible.

2
  • Flexbox no es tan experimental ;) depende realmente que tanto soporte de IE necesites. caniuse.com/#feat=flexbox
    – Shaz
    Commented el 30 ago. 2016 a las 18:22
  • @Shaz Lo sé, por eso escribí "de preferencia". Intentando resolverlo me vino a la mente como podría haberse resuelto un problema similar hace unos años atras.
    – devconcept
    Commented el 30 ago. 2016 a las 18:26

1 respuesta 1

5

Según mi experiencia, lo más cercano (sin flexbox) sería haciendo que el contenedor y su contenido se comporten como "tablas", también le puedes poner anchos determinados si deseas:

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

3
  • Esta solución es buena pero aun deja un tamaño arbitrario para el contenedor de los botones. La solución ideal sólo debe ocupar el tamaño necesario y dejar el resto al otro contenedor.
    – devconcept
    Commented el 30 ago. 2016 a las 18:45
  • Hice una modificación para dicho efecto.
    – Shaz
    Commented el 30 ago. 2016 a las 18:50
  • Perfecto, esta es la solución que andaba buscando.
    – devconcept
    Commented el 30 ago. 2016 a las 18:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.