Sería algo así:
Código HTML :
<style>
.azul {
border: 1px solid blue;
margin: 0 10px 10px 0;
padding: 0 10px 0 0;
}
.rojo {
/* border: 1px solid red; */
margin: 0;
padding: 0;
float: left; /* esto hace el truco */
}
</style>
</head>
<body>
<div class="rojo">
<div class="azul">
<ul>
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
</ul>
</div>
<div class="azul">
<ul>
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
</ul>
</div>
</div>
<div class="rojo">
<div class="azul">
<ul>
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
</ul>
</div>
<div class="azul">
<ul>
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
<li>kjhsjkdfhskjdf
<li>skdjfksjdfksj
</ul>
</div>
</div>
He pegado solo la parte relevante. El truco aquí es crear dos columnas que son divs alineados a la izquierda y dentro de cada columna pones los divs con las listas. Si descomentas "border: 1px solid red;" verás cómo quedan organizadas las cosas.
De todas formas esto puede cambiar según los elementos que están por arriba y por abajo de las columnas. Así que conviene poner un "<div style="clear: both></div>" después del último div que hace columnas (las rojas).
Así se ve (en Opera al menos):
