How to create a css double list

HTML

------------------------------------------------------------


<div id="midsection">

<div id="col1">

<h3>Title</h3>

<ul>

<li>Link 1</li>

<li>Link 2</li>

<li>Link 3</li>

<li>Link 4</li>

<li>Link 5</li>

</ul>

</div><!-- end col1 -->




<div id="col2">

<h3>Title 2</h3>

<ul>

<li>Link 6</li>

<li>Link 7</li>

<li>Link 8</li>

<li>Link 9</li>

<li>Link 10</li>

</ul>

</div><!-- end col2 -->

</div>







CSS

------------------------------------------------------------



#midsection {float: left;

width:670px;

text-align: left;

margin: 0px;

padding: 20px 5px 5px 5px;

border-top: 1px solid #999999;

border-bottom: 1px solid #999999;

}




#col1 {

float: left;

width: 420px;

}




#col2 {

float: left;

width: 240px;

}




h3{

font:13px ITC Avant Garde Gothic,Verdana, Arial, Sans-Serif, Tahoma, Geneva;

color: #000000;

font-weight: bold;

text-align: left;

padding: 0px 0px 0px 5px

}


this can be seen on one of my sites Priority Traveller