2カラムのレイアウト、どのようにボーダーの高さがボーダーの高さを決定するようにボーダーを適用するか

Question

私は2列のレイアウトを持っています。私は混乱しています。境界を（左側のものに）適用するか、右側のものを適用するかは、どちらがより多くの内容を持っているかに応じて動的である必要があります。

コンテナ部門に頼らなければなりませんか？誰かが例を持っていますか？私はこれを行うために背景の例を適応しようとしているが、役に立たない。

Answer 1

質問が正しいかどうか分かりません。

しかし、私は絶対的なラインとコンテナの相対を設定することにより、この

div container 
+ div left content 
+ div right content 
+ div line 

ようにそれを行うだろう。したがって、ラインに50％の左の位置と100％の高さを与えることができます。そのため、常にコンテンツの長さと同じです。ここで

は例です：http://jsfiddle.net/Ej2Gy/

Answer 2

http://jsfiddle.net/jzsQh/

かなりシンプル：

<style type="text/css"> 
    .wrapper { 
     border: 1px solid #000; 
     float: left; 
     margin: 10px; 
    } 
    .left-column, .right-column { 
     float: left; 
     padding: 5px; 
    } 
    .left-column { 
     border-right: 1px solid #000; 
    } 
    .right-column { 
     border-left: 1px solid #000; 
     margin-left: -1px; // makes the borders line up 
    } 
    .clearfix { 
     clear: both; 
    } 
</style> 

<!-- Example: Longer Left Column --> 
<div class="wrapper"> 
    <div class="left-column"> 
     Longer Left Content<br> 
     Longer Left Content<br> 
     Longer Left Content<br> 
     Longer Left Content<br> 
    </div> 
    <div class="right-column"> 
     Shorter Right Content<br> 
     Shorter Right Content<br> 
    </div> 
    <br class="clearfix"> 
</div> 

<!-- Example: Longer Right Column --> 
<div class="wrapper"> 
    <div class="left-column"> 
     Shorter Left Content<br> 
     Shorter Left Content<br> 
    </div> 
    <div class="right-column"> 
     Longer Right Content<br> 
     Longer Right Content<br> 
     Longer Right Content<br> 
     Longer Right Content<br> 
    </div> 
    <br class="clearfix"> 
</div>