Display check boxes in a fieldset into three columns - css

Question

I have a fieldset with check boxes organized with ul, li. I have three lists (all part the same fieldset). I want to display them into three columns, each ul (list) is a column from left to right.
Do I have to wrap each ul in a DIV?... I need help.
Here's what it looks like on my site right now... MaddenUltimateZone.com
<fieldset class="position">
<legend>Position:</legend>
<ul>
<li>Offense</li>
<li>
<input type="checkbox" id="qb" value="QB" />
<label class="position" for="qb">QB</label>
</li>
<li>
<input type="checkbox" id="hb" value="HB" />
<label class="position" for="hb">HB</label>
</li>
<li>
<input type="checkbox" id="fb" value="FB" />
<label class="position" for="fb">FB</label>
</li>
<li>
<input type="checkbox" id="wr" value="WR" />
<label class="position" for="wr">WR</label>
</li>
<li>
<input type="checkbox" id="te" value="TE" />
<label class="position" for="te">TE</label>
</li>
<li>
<input type="checkbox" id="lt" value="LT" />
<label class="position" for="lt">LT</label>
</li>
<li>
<input type="checkbox" id="lg" value="LG" />
<label class="position" for="lg">LG</label>
</li>
<li>
<input type="checkbox" id="c" value="C" />
<label class="position" for="c">C</label>
</li>
<li>
<input type="checkbox" id="rg" value="RG" />
<label class="position" for="rg">RG</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Defense</li>
<li>
<input type="checkbox" id="le" value="LE" />
<label class="position" for="le">LE</label>
</li>
<li>
<input type="checkbox" id="re" value="RE" />
<label class="position" for="re">RE</label>
</li>
<li>
<input type="checkbox" id="dt" value="DT" />
<label class="position" for="dt">DT</label>
</li>
<li>
<input type="checkbox" id="lolb" value="LOLB" />
<label class="position" for="lolb">LOLB</label>
</li>
<li>
<input type="checkbox" id="mlb" value="MLB" />
<label class="position" for="mlb">MLB</label>
</li>
<li>
<input type="checkbox" id="rolb" value="ROLB" />
<label class="position" for="rolb">ROLB</label>
</li>
<li>
<input type="checkbox" id="cb" value="CB" />
<label class="position" for="cb">CB</label>
</li>
<li>
<input type="checkbox" id="fs" value="FS" />
<label class="position" for="fs">FS</label>
</li>
<li>
<input type="checkbox" id="ss" value="SS" />
<label class="position" for="ss">SS</label>
</li>
<li>
<input type="checkbox" id="rt" value="RT" />
<label class="position" for="rt">RT</label>
</li>
</ul>
<ul>
<li>Special Teams</li>
<li>
<input type="checkbox" id="k" value="K" />
<label class="position" for="k">K</label>
</li>
<li>
<input type="checkbox" id="p" value="P" />
<label class="position" for="p">P</label>
</li>
</ul>
</fieldset>
</form>
Here's my CSS... maybe something is conflicting.
#filters {
background: #F2F2F2;
border: 1px solid #CCCCCC;
padding: 15px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
fieldset {
border: 1px solid #ccc;
border-radius:4px;
padding: 4px;
display:inline-block;
}
.tier {
float: right;
width: 125px;
}
.position {
float: right;
width: 300px;
margin: 0 10px 0 0;
}
.position ul {
display:inline-block;
vertical-align:top;
}
input[type="radio"],
input[type="checkbox"] { position: absolute; left: -999em; }
label:before {
display: inline-block; position: relative; top:0.25em; left:-2px;
content:''; width:25px; height:25px;
background-image:url(img/formelements.png); }
input[type="checkbox"] + label:before { background-position: 0 -25px;}
input[type="checkbox"]:checked + label:before {background-position: 0 0 ; }
input[type="radio"] + label:before { background-position: -25px -25px;}
input[type="radio"]:checked + label:before { background-position: -25px 0;}
/* Remove the custom styling for IE 7-8 */
.ie8 label:before { display:none; content:none; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"],
.ie7 input[type="checkbox"],
.ie7 input[type="radio"]{
position: static; left:0; }
.ie8 input[type="checkbox"],
.ie8 input[type="radio"] {
position:relative; top:5px; margin-right:0.5em;}
input[type="text"]:focus, textarea:focus {
border-color:#000;
}

Answer 1

.position ul{
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/w5aFW/1