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 height, but am having a problem with this. So far I am only viewing the page in Firefox, and figured I'd worry about any cross-browser issues after I get it working in at least one browser.

Here is the markup:

<div id="main-container" class="border clearfix">
    <div id="left-div" class="border">
        ...
    </div>
    <div id="right-div" class="border">
        ...
    </div>
</div>

Here is the CSS:

#main-container     { position: relative;                             min-height: 500px; }
    #left-div       { position: relative; float: left;  width: 700px; min-height: inherit; }
    #right-div      { position: relative; float: right; width: 248px; min-height: inherit; height: inherit; }

.clearfix:after     { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; _height: 1%; clear: both; }
.clearfix           { display: block; clear: both; }
.border             { border: solid 1px #000; }

If the content in the #left-div is longer than 500px, the #right-div does not expand to match. In an example I tried, Firefox said the computed style height of the #main-container was 804px, the computed style height of the #left-div was 800px, and the computed style height of the #right-div was 586.2px, as it had expanded to fit it's own content.

I understand I might be going about this the wrong way, and if this is a duplicate questions then I apologize, but I wasn't quite sure what to search under.

Answer 1

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!

Answer 2

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 3

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 4

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;
}

Answer 5

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

Answer 6

This will allow the right div's height to always be that of the left as left grows dynamically based on content, but the right will never grow larger than min-height if the left has less content, that may be acceptable for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Matching Size Divs</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style>
    #main-container { position:relative; min-height:500px; }    
    #left-div { width:700px; min-height:500px; }      
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }    
 </style>
</head>
<body>
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
        ...
    </div> 
    <div id="right-div" class="border"> 
        ... 
    </div> 
</div>
</body>
</html>

Answer 7

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 8

I think this can be implemented by specifying both the div s (i.e. left-div & right-div) height to be 100%. This way they'll take up the height of container div & if no height is specified for the container div by html/css, then the container div also expands to accommodate its child elements. I know its quite late, but it might just save you the script.

Answer 9

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 10

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');
        });
    });
});