Divs debajo alado de otro y ordenados

[Karmac]

Lo siento, pero lo que yo te decía no funcionaba. He estado aquí una hora probando y buscando por Internet y he dado con la solucción, te dejo el ejemplo que acabo de hacer. Lo que está entre los dos comentarios es lo que hace la magia.

Código HTML:

<style type="text/css">
.wrapper {
	width: 800px;
	border-right: 4px solid red;
}

.row {
	border-right: 4px solid aqua;
	margin-bottom: 20px;
	
	/* -- */
	overflow: hidden;
	/* -- */
}

.col {
	background: lime;
	margin-left: 8px;
	width: 190px;
	
	/* -- */
	float: left;
	padding-bottom: 100%;
	margin-bottom: -100%;
	/* -- */
}
</style>

<div class="wrapper">
	<div class="row">
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
				<li>Item 7</li>
			</ul>
		</div>
		<div class="col">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
			</ul>
		</div>
	</div>
</div> 

Saludos.