Even Column Height - Is This Even Possible

Hi, i have a page on my site that lists businesses in an A-Z directory list.

My page is split into 3 columns and i was wondering IF it is possible to code the 3 columns so that they spread out the content between then so that they stay the same height... let me try and draw this.

A I P
B J Q
C K R
D L S
E M U
F N V
G O Y
H X
Y
Z

The 3 columns above are uneven... is there a way of coding the 3 columns so that they are fluid (not sure if that is the right word) so that it balanced out and shares the content evenly between the 3 columns, thanks in advance for your help...

 

just an example you may want to edit the widths to match your spec:
<style>
.itemList ul{
width:900px;
float:left;
list-style-type:none;
margin:0;
padding:0;
}

.itemList ul li{
width:290px;
padding:5px;
float:left;
}
</style>

<DIV class="itemList">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
</DIV>

 

Thanks... i was given the code below also... which do you think is better:


html -

<div id="c1">abcdefghi</div>
<div id="c2">jklmnopqr</div>
<div id="c3">stuvwxyz</div>

Code (markup):

css-

#c1, #c2, #c3 { width:10px; word-wrap: break-word; float:left;}
#c2, #c3 { padding-left:10px; }

Code (markup):

example

http://www.netu.co.il/uploads/c_example.html

 

My example is more semantic and uses less code.