HTML/CSS set div to height of sibling

Question

I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).

I'd go for a table.

Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!

If you know which of the inner div's you want to set the height of the page layout you can do something like this: http://codepen.io/anon/pen/vOEepW

<div class="container">
  <div class="secondary-content">
    <div class="content-inner">
    </div>
  </div>
  <div class="main-content">
  </div>
</div>

Setting the containing div to position: relative and then setting one of the inner divs to position absolute allows the other, "un-styled" div to effectively control the height of both.

.container {
  position: relative;
}
.main-content {
  width: 80%;
  margin-left: 20%;
  height: 300px;
  background-color: red;
}
.secondary-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  overflow-y: scroll;
}

It is also possible to do this, and perhaps easier using flexbox, but that has some browser support issues.

First thing you should ask yourself is - Why do you need them to be at the same height? Is it because:

1. You want the background to be the same size?
2. The middle border to be the same height?
3. Or is there some content on the bottom that needs to be displayed inline with bottom of the other div?

1) If you want the background to be the same size, then i advise you to CSS style the parent div, and at worst - edit the background image so it fits. With CSS2 you can position the background easy

{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
} 

2) Whenever i stumble upon your problem, i need the center border to be the same height. The solution is easy- apply the border style to the DIV that will be longest.

3) Merge both of the content to a third sibling DIV, if you cant, then you will need JavaScript. OR as Pekka said - use display: table if you don't care about IE.

I ran into this issue several times this week and this topic was the closest I came to finding a concrete answer. This is an expansion on @Pekka's response for those who need a bit more to go on, I certainly did.

jsFiddle

example html:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">
            Lorem ipsum dolor sit amet, at assum gubergren his, 
            ex iudicabit dissentiunt intellegebat has. Ne odio detraxit
            instructior vim. Fugit velit consetetur an eos. 
            Ea suas veri mnesarchum mel.
        </div>                
    </div>
</div>

example css:

.view-table
{
    display:table;
    width:100%;
}
.view-row
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;

}
.view-name 
{
    text-align:right;
    background-color: lightblue;
}
.view-type
{
    background-color: pink;
}

I think you have these options:

• faux columns - using a repeating background image for the container div to create the appearance of equal height
• using a table
• using javascript to adjust the div height
• using a javascript to add css support to non-compliant browsers