title: Vertical border between floating DIVs using CSS
body: <p>I have the following HTML structure</p>
  
  <pre><code>&lt;div id='parent'&gt;
      &lt;div id='child-1'&gt;Some text goes here&lt;/div&gt;
      &lt;div id='child-2'&gt;Different text goes here&lt;/div&gt;
      &lt;div class='clear'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also have the following CSS</p>
  
  <pre><code>#parent {
      width: 800px;
      position: relative;
  }
  
  #child-1 {
      width: 500px;
      float: left;
  }
  
  #child-2 {
      width: 200px;
      float: left;
  }
  
  .clear {
      clear: both;
  }
  </code></pre>
  
  <p>Now, the contents of the child DIVs (<strong>child-1</strong> and <strong>child-2</strong>) could be anything, so eventually <strong>child-1</strong> might have longer height than <strong>child-2</strong>, or <strong>child-2</strong> might have a longer height than <strong>child-1</strong>.</p>
  
  <p>What I want to do, is have a vertical line between <strong>child-1</strong> and <strong>child-2</strong>, and this line has the length of the DIV that is of longer height. I tried border on both DIVs, (right border for <strong>child-1</strong> and left border for <strong>child-2</strong>), but this is not a good idea, because the line will appear thick where the two DIVs touch each other and then thin for the extended part.</p>
  
  <p>How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra DIVs are needed then this is OK though.</p>
  
  <p>Thanks.</p>