浮動要素が浮動小数点要素の高さに影響を与える理由を特定する方法（D7はzenテーマを持つブロックを表示します）？

Question

D7で構築されたサイトを7.x-56のzenサブテーマで更新しています。テーマは、水平に積み重ねられたコンテンツ領域に対応してレイアウトされています。私はカスタムブログのコンテンツタイプを作成し、タクソノミー、アーカイブ、最近の投稿に基づいて3つのビューブロックを作成しましたが、コンテンツ領域内の個々のブロックのレイアウトに問題があります。

3つのブログコンテンツフィルタブロックが積み重ねられ、右に浮かびます。ブログ自体は左に浮かんでいます。私はこれを多かれ少なかれ引き出すが、ブロックを浮かべてお互いの上に積み重ねるようにしているが、問題は最初のブログ投稿の高さに何らかの影響を与えているということだ。 浮動小数点要素がビューの行の高さに影響するのはなぜですか？これをどのように修正できますか？あなたはサイトのライブバージョンをここに見ることができますenter link description here。コンテキストの場合、pageはカスタムコンテンツタイプから構築されたビューであり、フィルタービューは、行の高さが等しい-9のコンテキストモジュールを使用して配置されます。 ここにサイドバー領域を追加する必要がありますか？またはこれのCSS修正がありますか？

Answer 1

メインブログ領域に幅％を与え、それを左に浮かべます。右側のスタックされたdivの場合は、すべてのdivを1つのdivに入れ、そのdivを右側に浮動させ、divに幅％を与えます。

これらのdivの両方を含むdivを "overflow：auto"に設定してください。

#main { 
    overflow:auto; 
} 

#left { 
    float:left; 
    width:65%; 
} 

#right { 
    float:right; 
    width:30%; 
} 

<div id="main"> 
    <div id="left"></div> 
    <div id="right"> 
     <div id="box-1"></div> 
     <div id="box-2"></div> 
     <div id="box-3"></div> 
    </div> 
</div>