Skip to main content
2 de 3
se eliminaron 23 caracteres en el cuerpo
Marcos
  • 35.7k
  • 7
  • 36
  • 70

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 del div y como mínimo va a medir 1024px. 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.

Marcos
  • 35.7k
  • 7
  • 36
  • 70