CSS Trick: How to Match the Height of Sibling Elements

This is a very common CSS problem. How do you get an element to match the height of its sibling element? There is one solution where you use a container element and a repeating background image to create a divider. I have another solution here that is all CSS.

This is a very common CSS problem. How do you get an element to match the height of its sibling element? There is one solution where you use a container element and a repeating background image to create a divider. I have another solution here that is all CSS.

The difficult part of matching siblings without setting a height is this: what if you have dynamic content and one elements content is longer than the others?

If you make the bottom padding on all of the sibling elements incredibly large with the same amount of negative margin on the bottom, they cancel out. But through some strange CSS logic, the siblings will match eachothers height.

Disregarding the styling for color and width, this is the code I'm using to match the elements' heights below.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 1
  • 2
  • 1
  • 2
  • 3
  • 4
  • 5

It works with any number of columns. Here I have 3 columns. For the sites that have two side bars and a main column. Because the container element has overflow: hidden the columns extend 10000 pixels outside of their content, but the container shows the content and hides all of the padding.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 1
  • 2
  • 1
  • 2
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 1
  • 2
  • 1
  • 2
  • 1
  • 2
  • 3
  • 4
  • 5
<style>
  .example-container {
    overflow: hidden;
  }
  .column-1, .column-2, .column-3 {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
    float: left;
  }
</style>

<div class="example-container"></div>
  <div class="column-1 tall">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <div class="column-2">
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
</div>

If you use this though, you will have to check your browsers. In my limited testing, it works on all of the major browsers including Internet Explorer 8 and up.