Doble columna con css

[Joni2Back]

Buenas, tengo que hacer unas 2 columnas con divs o spans en las cuales, segun si es de class=izq o de class=der se posicione en cada lado.
logre hacerlo, el problema esta en que cuando supongamos
tengo primeras 3 divs de class izq.. y luego 2 de class der.. , las de la derecha no quedan arriba de todo, sino en la misma linea de la ultima.. aca pongo un ejemplo y el codigo de fuente

Código:

<style>
div.comments {
width:200px;
}

div.izq {
float:left;
background:green;
clear:both;
width:50%;
}

div.der {
width:50%;
float:right;
background:red;
vertical-align:top;
}
</style>

<div class="comments">
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="der">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="izq">google.com</div>
    <div class="der">google.com</div>
    <div class="izq">google.com</div>
</div>

[sanxuan]

La solución habitual es crear dos divs derecha e izquierda y colocar dentro de éstos el resto.
<div class="comments">
<div class="izquierda">
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
</div>
<div class="derecha">
<div class="der">google.com</div>
<div class="der">google.com</div>
</div>
</div>

[chwc]

sanxuan yo estaba haciendo lo mismo jeje

<style>
div.comments {
width:100px;
float:left;
}

div.izq {
float:left;
background:green;
clear:both;
width:50%;
}

div.der {
width:50%;
float:left;
background:red;
vertical-align:top;
clear:both;
}
</style>

<div class="comments">
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
<div class="izq">google.com</div>
</div>
<div class="comments">
<div class="der">google.com</div>
<div class="der">google.com</div>
</div>

[ArturoGallegos]

pues lo que ya dijeron los compañero e igual te comento tu problema radica en el clear:both

div.izq {
float:left;
background:green;
clear:both;
width:50%;
}