兩欄佈局 LazyGreedy
這種佈局使用一個浮動列於沒有限定寬度建立一個兩列布局。在這個例子中左側邊欄是懶惰，因為它需要的，因為它不僅佔用了儘可能多的空間。以另一種說法是，左側邊欄是“收縮包裝。” 正確的內容欄是貪婪，因為它佔用了所有的剩餘空間。
HTML：
<div class="sidebar">
<h1>Sidebar</h1>
<img src="http://lorempixel.com/150/200/" />
</div>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. </p>
</div>
CSS：
.sidebar {
/* `display:table;` shrink-wraps the column */
display:table;
float:left;
background-color:blue;
}
.content {
/* `overflow:hidden;` prevents `.content` from flowing under `.sidebar` */
overflow:hidden;
background-color:yellow;
}