CSS Master

Figure 4.32. A list split into three columns

Theold-schoolwayofcreatingthislayoutistosplitourlistintothreeseparateones
andfloatthemtotheleftorrightofacontainingelement.Here’swhatthemarkup
mightlooklike:

<div class="clearfix">

<ul class="column-float-left">

<li>Apples</li>

<li>Oranges</li>

<li>Bananas</li>

<li>Dragon fruit</li>

</ul>

<ul class="column-float-left">

<li>Cherries</li>

<li>Strawberries</li>

<li>Blueberries</li>

<li>Raspberries</li>

</ul>

<ul class="column-float-left">

<li>Durian</li>

<li>Mangosteen</li>

Complex Layouts 167