1つの大きなテキストブロックの左側に異なる幅の2つの要素を浮動させるにはどうすればよいですか？

Question

私は、1）ポストサムネイル、2）ソーシャルメディアボックス、および3）記事テキストの3つの要素を含むブログ記事を持っています。テキストをサムネイルの左に浮かべて（簡単に）、ソーシャルメディアボックスの左側にテキストを浮かべて、サムネイルの下にソーシャルメディアボックスを表示します。それを言うもう一つの方法は、私はサムネイルがソーシャルメディアボックスの上にあることを望んでいるが、それらの左に記事のテキストを浮かべておくことだ。問題は、サムネイルがソーシャルメディアボックスよりも広く、サムネイルの幅を補うためにソーシャルメディアボックスの右側に大きなギャップがあることです。テキストを両方の要素の左側に浮動させて、両方の要素に対してぴったり合うようにするにはどうすればよいですか？

私のコードはin jsFiddle

Answer 1

あなたはそれらを個別に浮き、というよりも浮いたdiv要素内のすべての項目をラップすることにより、個別に各サイドバーアイテムをラップするテキストを取得することができます。

.article-image, .sharebox-outer { 
    clear: left; 
    float: left; 
} 

jsFiddle

Answer 2

利用可能であることはdiv要素を含む全体をいっぱいになるように浮かべ、ソーシャルメディアボックスを押し下げ、特定の幅を与えます。

h2.gentesque { float:left; width: 500px; } 
.article-image { float:left; width: /* whatever width */ }