css - How do I make the height of two right divs equal the height of the left divs

Question

I have a site that is divided into two classes: right and left. The left had 3 boxes in it and the right had one. The box on the right's height would stretch or shrink to be the same as the sum of the height's of the left boxes. I have added another box underneath the box on the right and I want the same effect now with the two boxes (the sum of the height of the two boxes on the right should always equal the sum of the height of the three boxes on the left. Here is the old code that worked with the one box on the right:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
</div>

And here is the css:

.right{ float: right; display: inline; width:404px; position:relative; }
.boxx { margin-top:11px;  }
.boxx:first-child { margin-top:0;  }
.boxx .boxx-content { background: #fff; padding:4px 18px; color:#a7a7a7;
  font-family: 'Roboto', sans-serif; font-weight:300; border-radius: 0 0 3px 3px; }
.details-history .boxx-content { padding: 0 0 0 0!important; position:absolute; 
   left:0; right:0; bottom:0; top:22px; }

Here is the new code:

<div class="right">
    <div class="boxx details-history">
        <div class="boxx-content">
            Box content goes here
        </div>
    </div>
    <div class="boxx details-coursework">
        <div class="boxx-content custom-scroll">
            Box content goes here
        </div>
    </div>
</div>

I've been trying for several hours now to write some css to make this work, but i can't seem to get it right. I think the trick has something to do with taking the 'position: absolute;' out of .details-history and putting it into a new class called details-coursework, but i can't figure out exactly what to do.

Milligan

Do you know javascript? If so you can get the height of the div you want and set the other divs to match. – Rogers

Thanks, but I think javascript is overkill for this. css should be able to do it. I was able to do it with one, there should be a way to do it with two. – Milligan

Adam technically answered my question, but my question has actually changed a lot and I still have my problem. Here is a new stack overflow question to address this: #21742850 – Milligan

Answer 1

Only way I can see this working without JS is to set heights for all the elements

HTML

<div class="wrapper">
    <div class="left">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
    <div class="right">
        <div class="one"></div>
    </div>
</div>

CSS

.left {
    width : 50%;
    height : 1000px;
    background : rgba(0,0,200,0.1);
    float : left;
}

.right {
    width : 50%;
    height : 1000px;
    background : rgba(200,0,0,0.1);
    float : right;
}

.left div {
    margin : auto;
    margin-top : 20px;
    width : 90%;
    height : 100px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

.right .one {
    margin : 20px auto;
    width : 90%;
    height : 344px;
    background : rgba(200,0,0,0.1);
    border : #FFFFFF 1px solid;
}

Check out this Fiddle

Fructuous

Answer 2

I used some sort of the task. In my example, there are two boxes: left and right. The right box should automatically adjust its height according to left box's height (which may be arbitrary). There is a lot of scrollable text in the right box.

  #container {
    width: 200px;
  }

  #left-positioner-parent {
    position: relative;
    /* Width of the left box relative to #container.
        Could be in pixels too. */
    width: 50%;
  }

  /* Contained style to exclude use of calc()
      with border width and height in #right-box */
  #left-box {
    border: 15px solid red;
  }

  #right-box {
    position: absolute;
    /* To exclude use of calc() */
    box-sizing: border-box;
    left: 100%;
    width: 100%;
    top: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border: 5px solid black;
  }

  #right-content {
    /* No need of styling for this example */
  }

<!-- A container for useful example width -->
<div id="container">

  <!-- A different div for the left content is to allow
    the left div to have borders without using CSS calc()
    and border width and height in right div's style. -->
  <div id="left-positioner-parent">

    <div id="left-box">Left<br>block of text.</div>

    <div id="right-box">
      <!-- Some long scrollable content -->
      <div id="right-content">Right<br>block<br>of<br>text<br>with<br>multiple<br>lines.</div>
    </div>
  </div>
</div>

Nessie

Note the method doesn't use float or flexbox, and could be not what you're looking for if it's required or acceptable to stack the two boxes on top of one another. – Nessie

Answer 3

You have to fake it. You simply can't do this with CSS. Percentage based heights with known number of boxes could help, but you would need JS to at least calculate and set the height of the parent. Without knowing your design, the easiest way to do this is something like this:

<div class="container">
    <div class="right">
        Whatever Content You Want
    </div>
    <div class="left">
        Whatever Content You Want
    </div>
    <div class="clear"></div>
</div>

.right {
    float:right;
    width:404px;
 }
.left { margin-right:404px; }
.clear { clear:both; } /* Or another clearing method */

This will create what you have for columns inside of a container that is as tall as the tallest element. What you would then do is put a backgound-image on the .container element that has a 404px graphic of some sort just on the right side of it. That would make it look like the right side appear as if it is as tall as the left side, but without it actually being that tall.

Bacterin