Question

I have two divs placed inside a larger div. Each one of these two divs contains dynamically generated content and thus their heights vary, so I cannot know which one of the two will be taller. The parent div they are placed in has a 1px border and I would like to have 1px line between these divs as well, so that the line extends all the way down to the bottom of the parent div which adjusts itself based on the heights of the child divs. This is much easier to understand in the following picture:

I have tried setting the child divs to a height of 100%, but that does not seem to be working. How can I accomplish this effect? (This also needs to work in IE6)

Answer 1

Well, this is relatively easy, if all you want is a single border extending to the full height of the tallest element (in this case the tallest div), albeit my solution doesn’t really address the potential equal heights issue (if you wanted the background-color of each div to extend to the full-height of the tallest element. It does, though, satisfy your request for the full-height single border:

  #left,
  #right {
    width: 40%; /* adjust to taste */
    float: left;
    padding: 1em; /* adjust to taste */
  }
  #left {
    border-right: 4px solid #000; /* adjust to taste */
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

JS Bin Demo.

---

Edited to address my misunderstanding/mis-reading of the question.

This approach is kind of a hack, but is achievable using the same mark-up as in the previous demo, but more complex CSS:

  #left,
  #right {
    width: 40%;
    float: left;
    padding: 1em;
  }
  #left {
    border-right: 4px solid #000;
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

  #right p,
  #left p {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin: 0;
    padding: 0 0.5em 1em 0.5em;
  }

  #right p:first-child,
  #left p:first-child {
    padding-top 1em;
    border-top: 1px solid #ccc;
  }

  #right p:last-child,
  #left p:last-child {
    border-bottom: 1px solid #ccc;
  }

Demo at JS Bin.

This won’t be cross-browser friendly, though, IE (for certain) is likely to have problems with, at least, the :last-child pseudo-selector, so a JavaScript solution might be better for you in this instance. Although there is a more simple option to wrap the inner divs (in this case the #left and #right divs) in another div:

<div id="wrap">
    <div id="left">
        <div class="innerWrap">
            <!-- content -->
        </div>
    </div>
    <div id="right">
        <div class="innerWrap">
            <!-- content -->
        </div>
    </div>
</div>

Which can be used with the css:

  #left,
  #right {
    width: 40%;
    float: left;
    padding: 1em;
  }
  #left {
    border-right: 4px solid #000;
  }
  #right {
    border-left: 4px solid #000;
    margin-left: -4px; /* the negative width of the border */
  }

  div.innerWrap {
    border: 1px solid #000;
  }

Demo at JS Bin

But, while that’s more cross-browser friendly, it does start a descent into the madness that is divitis.