HTML/CSS set div to height of sibling

Question

I have 2 div\'s contained in a third. One of the contained div\'s is floated left, the other floated right. I would like the 2 sibling div\'s to always be at the same heig

Answer 1

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.

Answer 2

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.

Answer 3

It's a bit out of the scope, but I have a nasty Javascript solution.

HTML:

<div id="element-without-height" copy-size="#element-with-height"></div>
<div id="element-with-height"></div>

Javascript (using jQuery):

$(document).ready(function() {
    $(window).on('resize', function() {
        $('[copy-size]').each(function() {
            var copyEl = $($(this).attr('copy-size'));
            var targetEl = $(this);
            targetEl.width(copyEl.width() + 'px');
            targetEl.height(copyEl.height() + 'px');
        });
    });
});

Answer 4

They will stack if there is not enough room. Make sure the div containing both is wide enough to have them both... if you remove their widths for testing, I bet it will work.

Answer 5

In order to do this with HTML and CSS using divs, you will need to use JavaScript to check their heights, then change one to match.

If you don't want to use JavaScript, and your site has a particular design, in your third div, you can give it a repeat-y background image that will expand as one of the two divs does. So for example, say your two divs have a blue background, and your third containing div has a grey background. Remove the blue background and create an image that is repeatable using the blue and grey, and place that image for the third div. That way, as it expands, it will appear the two divs are as well.

Answer 6

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