creating multiple columns with <div><ul> and <li> - html

Question

just got stuck when creating multiple columns with .tried several ways but could not make it appropriate.
<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style"><ul style="border-bottom: 1px solid #CFCFCF;">
<li style="width: 15%; text-align: left;"><b>NICK</b></li>
<li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
<li style='width:12%; text-align: center'><em>Demos</em></li>
<li style='width:12%; text-align: center'>Maps</li>
<li style='width:12%; text-align: center'>Movies</li>
<li style='width:12%; text-align: center'>Server</li>
<li style='width:12%; text-align: center'>Website</li>
</ul></div>
desired output is
Staff / Administration
administration
-------------------------------------------------------------------------------------
NICK Chief Executive Officer Demos Maps Movies server Website

Answer 1

As Mr. Alien suggests, it might be more appropriate to use a table for this sort of information.
However, if you're sure you want to use a list, you can style the individual list items to either float, or flow as inline blocks. My personally preferred method is inline-block. The example below is slightly reformatted from yours, and I've pulled the inline-block styling out into an inline CSS block.
<style type="text/css">
ul.adminTable > li {
display: inline-block;
}
</style>
<h3>Staff / Administration</h3>
<div align="center" class="center-content"><ul style="border-bottom: 1px solid #CFCFCF;"><strong>Administration</strong><br /></div>
<div class="page-style">
<ul style="border-bottom: 1px solid #CFCFCF;" class="adminTable">
<li style="width: 15%; text-align: left;"><b>NICK</b></li>
<li style="width:12%; text-align: left;"><em>Chief Executive Officer</em></li>
<li style='width:12%; text-align: center'><em>Demos</em></li>
<li style='width:12%; text-align: center'>Maps</li>
<li style='width:12%; text-align: center'>Movies</li>
<li style='width:12%; text-align: center'>Server</li>
<li style='width:12%; text-align: center'>Website</li>
</ul>
</div>

Answer 2

As Mr. Alien suggested, just use the <table> element for this:
<h3>Staff / Administration</h3>
<table border="0">
<tr>
<th colspan="7">
Administration
</th>
</tr>
<tr>
<th>
Nick
</th>
<td>
<em>Chief Executive Officer</em>
</td>
<td>
<em>Demos</em>
</td>
<td>
Maps
</td>
<td>
Movies
</td>
<td>
Server
</td>
<td>
Website
</td>
</tr>
</table>
You use tabular-data after all, so definally the way to go.
jsFiddle

Answer 3

I cleared up some of your invalid html code and added following css:
.page-style{
vertical-align: top;
}
ul {
display: inline;
vertical-align: top;
}
ul li {
display: inline-block;
width: 100px;
vertical-align: top;
}
.administration-title {
width: 100%;
border-bottom: 1px solid gray;
}
See demo here:
http://jsfiddle.net/T5t7q/