サイトのメイン ページには、メインのイントロ コンテンツ エリアと右側のサイドバーがあります。
メイン コンテンツがサイドバーの高さ (それ自体がコンテンツに基づいて拡張) を超えたときに、メイン コンテンツのテキストが右側のサイドバーを「ラップ」するようにしたかったのです。
以下は、これを達成するために使用した css とマークアップです ( Lorum ipsumについて事前にお詫び申し上げます。これを使用して、メイン コンテンツ テキストが右側のサイドバーをどのように「ラップ」するかを示しています)。
#container { width:100%; position:relative; padding:0; }
#maintext {}
#sidebar { float:right; width:200px }
<div id="container">
<div id="sidebar">
<ul>
<li>Secondary</li>
<li>Secondary</li>
<li>Secondary</li>
</ul>
</div>
<div id="maintext">
<p>More important intro text appearing AFTER sidebar in HTML flow: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum pharetra est eu aliquet. In lacinia est non augue egestas, nec sodales felis euismod. Curabitur lacus enim, egestas quis pharetra non, molestie ut nisi.</p>
<p>Cras eleifend, ante non elementum rhoncus, odio metus dapibus quam, eget aliquam risus odio et lorem. Suspendisse euismod urna cursus ligula commodo ultrices. Integer vulputate ante eu lectus consequat mattis. Donec tristique massa at lectus viverra congue. Maecenas elementum justo vel pretium pulvinar. Phasellus at tortor metus. Quisque at ligula metus. Nulla euismod ipsum sit amet ullamcorper sollicitudin. Sed accumsan libero vitae magna fermentum aliquam. Nunc nec nisi diam. Morbi iaculis bibendum rhoncus. Pellentesque sagittis bibendum felis in gravida.</p>
</div>
</div>
上記のフィドル: http://jsfiddle.net/Ezbd9/1/
このマークアップの問題は、サイドバーがコンテキスト上、メイン コンテンツの前に表示されることです。#sidebardiv が divに追従するように div を移動しようとしました#maintextが、その結果、サイドバーがメイン コンテンツの下に表示され、それ自体が右に浮いてしまいました。ここに見られるように：http://jsfiddle.net/Fct8F/1/
最初はこれについて心配していませんでしたが、SEO とサイトの新しいレスポンシブ デザインを考慮して、同じテキスト ラッピング効果を適切なフロー (つまり、メイン コンテンツに続いてサイドバー) で取得する方法を見つけようとしています。
要するに、上記のコードと同じ視覚的な結果を得たいのですが、HTMLの#maintextdivの前に div を使用します。#sidebar