haciendo dos divs flotantes la misma altura en html/css

introducción alcanzando la igualdad de iguales en Divs puede ser un desafío, especialmente cuando están al lado y tienen diferentes contenidos. Una solución común es usar tablas, pero este enfoque puede no ser semánticamente apropiado.

para lograr la misma altura sin usar tablas, CSS proporciona varias técnicas. Un enfoque implica establecer un relleno de fondo grande, negar ese relleno con un margen inferior negativo y rodear los Divs con un contenedor con desbordamiento oculto.

para demostrar esta técnica, considere el siguiente código CSS:

#contenedor {contenedor {contenedor {contenedor {contenedor {contenedor { desbordamiento: oculto; Ancho: 100%; } #Coror izquierdo { flotante: izquierda; Ancho: 50%; Color de fondo: naranja; Botón de relleno: 500EM; Botón de margen: -500EM; } #Coronel derecho { flotante: izquierda; Ancho: 50%; margen -derecha: -1px; / * para la compatibilidad de IE */ Border-izquierda: 1px Solid Black; Color de fondo: rojo; Botón de relleno: 500EM; Botón de margen: -500EM; }

#container {
  overflow: hidden;
  width: 100%;
}

#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

 
 
 conclusión 
   Esta técnica CSS proporciona una forma semánticamente correcta de crear divisas flotantes de igual altura en HTML/CSS. Mimina efectivamente el comportamiento de una tabla sin introducir un marcado innecesario.