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