Skip to main content
se añadieron 383 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

El uso de display: table está soportado por Internet Exlorer desde la versión 8.0 por lo que esta solución debería ser compatible con tu requerimiento.

El uso de display: table está soportado por Internet Exlorer desde la versión 8.0 por lo que esta solución debería ser compatible con tu requerimiento.

se añadieron 383 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

El uso de la regla display: table por defecto va a tratar que el elemento luzca similar a una tabla, lo que incluye entre otras cosas que los elementos con display: table-cell de su interior tengan la misma altura (todas las columnas adaptadas a la altura de la más alta). Pero esto entraba en conflicto con el float: left que tenías definido para las columnas, ya que ambas reglas tratan de colocar a los elementos a su propia manera.

El uso de la regla display: table por defecto va a tratar que el elemento luzca similar a una tabla, lo que incluye entre otras cosas que los elementos con display: table-cell de su interior tengan la misma altura (todas las columnas adaptadas a la altura de la más alta). Pero esto entraba en conflicto con el float: left que tenías definido para las columnas, ya que ambas reglas tratan de colocar a los elementos a su propia manera.

Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

Poniendo al padre un display: table, a las columnas hijas un display: table-cell y quitándoles a las columnas hijas el float:left debería valerte.

.container {
  width: 100%;
  outline: 1px solid red;
  display: table;
}

.imgCol {
  display: table-cell;
  position: relative;
  overflow: hidden;
  width: 25%;
  background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
  background-position: bottom;
  background-size: cover;
  outline: 1px solid green;
  min-height: 1px;
}

.content {
  width: 75%;
  outline: 1px solid blue;
  display: table-cell;
}
<div class="container">
  <div class="imgCol">
  <!-- Background image-->
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>

  <p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>

  <p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
  </div>
</div>