Ensure line between two divs in larger div extends all the way to the bottom of the parent div

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

try div {overflow:auto } where DIV is the container. or you can use the clearing DIV which you have to add after DIV 2 and before the main DIV .clear { clear:both }

EDIT: I overlooked - you wanted the DIVs to be set at equal height? That's not gonna happen due to the fact that it's a free flow document. You will need to use Javascript where it can look at the tallest DIV and set other DIV to match that height.

http://www.kensfi.com/set-a-div-height-equal-with-of-another-div/

Answer 2

considering you want this to degrade nicely all the way back to IE 6 have you considered a 3-column table with the center column with width of 1px band background-color of your divider color? outside olumns being the containers of your DIVs

Answer 3

I'm partial to JS in this case. If you assign an id to each div, then at the end of the loading of content call something like this (this is NOT REAL CODE):

if (get(div1).offsetHeight > get(div2).offsetHeight( {
  div1.borderRight = 1px;
else
  div2.borderLeft = 1px;

Oh...I may have misread that. If you want the divider to stretch the entire parent div, then set div1.style.height to divParent.clientHeight and add the border to it.

Answer 4

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.