Just working through this trying to get an output like the EE knowledge base page. So I have a 3 column layout and use the floated divs to get my rows. Using a switch I can give a custom class to the third and final div in each row so that it does not have a left hand margin. I am not quite sure why this needs to be placed second in the switch parameters but it seems to work.
<style type="text/css">
<!--
#content {
width: 490px;
}
.category-div {
width: 154px;
margin: 0 14px 0 0;
float: left;
}
.last {
margin: 0px;
}
-->
</style>
<div class="content">
{exp:query sql="SELECT cat_name FROM exp_categories WHERE group_id = '6'"}
<div class="{switch="category-div|category-div last|category-div"}">
<p>{cat_name}</p>
</div>
{/exp:query}
</div>
This gives me
<div id="content">
<div class="category-div">
<p>Category 1</p>
</div>
<div class="category-div">
<p>Category 2</p>
</div>
<div class="category-div last">
<p>Category 3</p>
</div>
<div class="category-div">
<p>Category 4</p>
</div>
<div class="category-div">
<p>Category 5</p>
</div>
<div class="category-div last">
<p>Category 6</p>
</div>
</div>
