Making two floated divs have the same height

If you need to make two floated divs have the same height, you can very easily accomplish this by doing three things:

  1. Use a container that has overflow: hidden set and wraps the two floated elements.
  2. Set a negative margin on each div
  3. Set positive padding on each div
<div class="wrapper">  
    <div class="left">I have some content.</div>
    <div class="right">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis arcu in nibh accumsan interdum. Integer dignissim eros in tortor tempus vitae blandit erat fringilla. Mauris massa diam, aliquam vel elementum ut, ultrices a nisi. Vivamus sed aliquet neque. Donec eu erat eget metus vulputate scelerisque. In hac habitasse platea dictumst. Pellentesque varius, ipsum vitae sagittis semper, metus erat pulvinar mi, eget sollicitudin elit lectus vitae ligula. Aliquam erat volutpat. Vivamus feugiat felis ac sem fermentum vitae interdum sapien pharetra. Praesent pharetra felis ligula. Quisque scelerisque pellentesque dapibus. Maecenas ullamcorper facilisis hendrerit. Nam et diam nec lorem varius venenatis. Pellentesque iaculis imperdiet nibh, id consectetur est facilisis nec. Proin at leo tortor, sed lacinia lectus.
    </div>
</div>  
.wrapper {
   overflow: hidden;
}
.left, .right {
   float: left;
   width: 300px;
   margin-bottom: -5000px;
   padding-bottom: 5000px;
}

You can view the full demo on JSFiddle.

comments powered by Disqus