La más "simple" es usar una table
, así por ejemplo:
- Al
div
lo indicamos que cuando contenido no entre, se oculte (overflow: hidden
) - Agregamos una
table
la cual va a ocupar el 100% del ancho deldiv
y como mínimo va a medir1024px
. Esta tabla va a tener una fila con 2 celdas - La celda de la izquierda va a tener la "X"
- La celda de la derecha va a tener la "estrella" alineada a la derecha
Ejemplo:
.header {
overflow: hidden;
border: 1px solid green;
background: linear-gradient(to bottom, #004AB1, #5DADE2);
height: 100px !important;
padding-left: 20px;
margin: 20px;
vertical-align: middle;
box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .1);
border-radius: 10px;
}
.header table {
width: 100%;
/* Punto de quiebre */
min-width: 1024px;
}
img {
border: 1px solid red;
}
.text-right {
text-align: right;
}
<div class="header">
<table>
<tr>
<td><img src="https://previews.123rf.com/images/blankstock/blankstock1902/blankstock190200727/125609735-eliminar-icono-quitar-letrero-s%C3%ADmbolo-cancelar-o-cerrar-elemento-de-dise%C3%B1o-de-calidad-icono-de-estil.jpg?fj=1" width="100" alt="logo_Cultura"></td>
<td class="text-right"><img src="https://previews.123rf.com/images/frizio/frizio1512/frizio151200007/49579125-%C3%A9toile-d-or-com%C3%A8te-symbole-de-no%C3%ABl.jpg?fj=1" width="900" height="81" alt="logo_Provident"></td>
</tr>
</table>
</div>
PD: Podemos reemplazar la table
con una estructura flexbox
o grid layout
. Si te interesa, dejamelo saber en los comentarios.
Actualización
Usando grid layout
Ejemplo:
.header {
overflow: hidden;
border: 1px solid green;
background: linear-gradient(to bottom, #004AB1, #5DADE2);
height: 100px !important;
padding-left: 20px;
margin: 20px;
vertical-align: middle;
box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .1);
border-radius: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
min-width: 1024px;
}
.cell1 {
grid-column: 1 / 2;
grid-row: 1;
}
.cell2 {
grid-column: 2 / 2;
grid-row: 1;
}
img {
border: 1px solid red;
}
.text-right {
text-align: right;
}
<div class="header">
<div class="grid">
<div class="cell1"><img src="https://previews.123rf.com/images/blankstock/blankstock1902/blankstock190200727/125609735-eliminar-icono-quitar-letrero-s%C3%ADmbolo-cancelar-o-cerrar-elemento-de-dise%C3%B1o-de-calidad-icono-de-estil.jpg?fj=1" width="100" alt="logo_Cultura"></div>
<div class="cell2 text-right"><img src="https://previews.123rf.com/images/frizio/frizio1512/frizio151200007/49579125-%C3%A9toile-d-or-com%C3%A8te-symbole-de-no%C3%ABl.jpg?fj=1" width="900" height="81" alt="logo_Provident"></div>
</div>
</div>