<div id="demo" class="yui-g">

<div id="col-left" class="yui3-u">

<ul id="list1">

<li class="fish"><img src="{{{componentAssets}}}/images/efish_03.png"/><div class="cat-num">Cat. #34620</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_09.png"/><div class="cat-num">Cat. #31899</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_12.png"/><div class="cat-num">Cat. #32230</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_05.png"/><div class="cat-num">Cat. #32003</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_04.png"/><div class="cat-num">Cat. #34551</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_06.png"/><div class="cat-num">Cat. #32398</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_08.png"/><div class="cat-num">Cat. #36667</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_02.png"/><div class="cat-num">Cat. #34821</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_10.png"/><div class="cat-num">Cat. #38144</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_13.png"/><div class="cat-num">Cat. #32445</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_07.png"/><div class="cat-num">Cat. #32201</div></li>

<li class="fish"><img src="{{{componentAssets}}}/images/efish_11.png"/><div class="cat-num">Cat. #32011</div></li>

</ul>

</div>

<div id="col-right" class="yui3-u">

<ul id="list2">

<li class="group-hd">Group A</li>

<!-- This fish has already been pre-placed in a group -->

<li class="fish"><img src="{{{componentAssets}}}/images/efish_01.png"/><div class="cat-num">Cat. #34114</div></li>

<li class="group-hd">Group B</li>

<li class="group-hd">Group C</li>

<li class="group-hd">Group D</li>

</ul>

</div>

</div>