CSS - rozložení webové stránky na více sloupců

Zdravím, potřeboval bych rozložit webové stránky podle tohoto obrázku(omlouvám se, dělal jsem ho v Malování): rrrpl4.jpg

HTML
<div i="sloupce">
<div i="1sloupec">
.
.
.</div>

<div i="2sloupec">
.
.
.</div></div>

Mi funguje, že mi rozdělí první část na 2 sloupce, tabulka a pak druhou část na 2sloupce, ale ať dělám, co dělám, tak tyto dva sloupce mi nejde dát vedle sebe. Vždy to začne dělat nesmysly, překrývat text atd., ale ke sloupcům rozděleným na další sloupce se nemůžu zdaleka dostat...
Nevíte, kde je chyba? Zkoušel jsem třeba další div ve 1sloupec a 2sloupec, který byl definován na další 2 sloupce
CSS vypadá něco ve stylu

#sloupce div {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}