Problema con maquetado a dos columnas

[mandrake88]

Estoy armando un modulo el cual necesito que sean 2 columnas. Cada una de estas 2 columnas va a mostrar un contenido que a su vez esta dividido en 3 columnas.

-------columna 1 ------------ columna 2
---sub1 sub2 sub3 ---------sub1 sub2 sub3

Espero que se entienda

Lo maquete asi:

Código HTML:

<div id="columna1">
     <div class="sub1">
        //Contenido
     </div>
     <div class="sub2">
        //Contenido
     </div>
     <div class="sub3">
        //Contenido
     </div>
</div>
 
<div id="columna2">
     <div class="sub1">
        //Contenido
     </div>
     <div class="sub2">
        //Contenido
     </div>
     <div class="sub3">
        //Contenido
     </div>
</div>
 

Código CSS:

#columna1{
        float: left;
        width: 50%;  //no se por que el foro esta mostrando mal esta linea xD
        margin: auto;
}
 
#columna2{
        float: right;
        width: 50%;
        margin: auto;
}
 
.sub1{
        float: left;
        width: 48%;
}
 
.sub2{
        float: right;
        width: 48%;
}
 
.sub3{
        width: 3%;
}
 

Como veran la sub-columna del medio es bien chiquita, necesito que quede entre medio de las otras 2.
La columna1 y columna2 quedaron bien, ambas ocupan el 50% del espacio que tienen disponibles (todo esto esta embebido dentro de otra capa que es la que determina el espacio que tienen, por eso uso %, es todo fluido)
El problema es que las subcolumnas (sub1,sub2,sub3) me salen una debajo de la otra, y no una al lado de la otra, pobre cambiandole los porcentajes, por que pense que era problema de espacio, pero no.

Ideas?