コンテナdivが水平方向にオーバーフローしていても垂直方向にオーバーフローしていません

Question

コンテナ内に2つの列を使用するWebサイトで作業しています。コンテナの背景は白いので、最も高い列の下に伸びるので、そのためにholy grailメソッドを使用しています。

ただし、どちらの列も白い背景を超えるように配置する必要があります（this exampleは固定高さを使用します）。私が知る限り、これはオーバーフローを可視に設定することによってのみ行うことができますが、これは列の等しい高さを壊します。

できるだけ少ない要素でこれを修正するにはどうすればよいですか？

Answer 1

この場合の最も簡単な修正は、#containerの終了タグの前に<br style="clear:both" />を追加しているようです。

希望する場合は<br class="clearfix" />と.clearfix{clear:both}に変更できます。

Answer 2

ソリューションinline-block要素を使用することです。..

のCss

.container{ 
    width:300px; 
    background-color:#ccc; 
    margin:0 auto; 
    border:1px solid red; 
} 
.container > div{ 
    width:150px; 
    display:inline-block; 
    vertical-align:top; 
} 
.inner{ 
    background-color:#666; 
    margin-top:10px; 
    width:130px; 
} 
.left .inner{ 
    margin-left:-10px; 
} 
.right .inner{ 
    margin-right:-10px; 
    margin-left:auto; 
} 

HTML

<div class="container"> 
    <div class="left"> 
     <div class="inner">left 1st inner panel</div> 
     <div class="inner">left 2nd inner panel</div> 
    </div><div class="right"> 
     <div class="inner">right 1st inner panel</div> 
     <div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div> 
    </div> 
</div> 

view demo