lista vertical que simule columnas

Buenas tardes

Quisiera saber como hago una lista vertical y que se me organice como columnas, me explico:

Tengo un div y dentro de este div una lista de estados

miami
new york
pensilvania
etc...

lo que quiero esque cuando esta lista llegue hasta abajo de mi div .states (que tiene un height asignado) esta lista empiece una nueva columna a la derecha...

yo lo estaba haciendo así :

Código HTML :

.states li {
   float: left;
   display: block;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #333333;
   padding: 5px 15px 5px 0;
   width: 100px;
   text-align: left;
}

pero así se me organizan de izquierda a derecha pero horizontalmente

como hago para simular estas columnas?

Se alinea de forma horizontal porque usas float:left

si yo se por eso la pregunta es como hago para que sean verticales, porque si le quito el float la lista seguiria de para abajo y no empezaria ninguna nueva columna

Con css 2.1 no podrás hacer que se forme una columna y que cuando alcance cierto número de filas se forme la segunda columna y así sucesivamente.

Tienes varias opciones:
--> Css 3 y sus múltiples columnas : http://www.css3.info/preview/multi-column-layout/
Peligro: es css3, no soportado por todos los navegadores

--> Recurrir a listas encadenadas:

Código HTML :

<ul>
   <li>
      <ul>
         <!-- aquí los li de la 1ª columna -->
      </ul>
   </li>
   <li>
      <ul>
         <!-- aquí los li de la 2ª columna -->
      </ul>
   </li>
   <li>
      <ul>
         <!-- aquí los li de la 3ª columna -->
      </ul>
   </li>
</ul>

Con las propiedades css correspondientes. Creo que estas no te serán de dificultad, si topas con alguna, comenta.

Si quieres "automatizarlo", necesitaras algún tipo de programación.

Saludos