Mantener margen en una estructura de 4 divs de tamaño variable

[madman_18]

Hola a todos!!

Quería a ver si alguno me podría dar una idea para controlar el margen entre varios divs que tienen un height variable...

La estructura es básica: tengo un contenedor el cual divido en dos columnas y estas contienen dos bloques divs.

Hasta ahí todo bien...pero me gustaría que el margen que mantienen los divs superiores (los que están dentro de las dos columnas) fuese siempre el mismo y así quedasen los dos divs inferiores siempre al mismo nivel (para que no aparezca uno más arriba que el otro o más abajo que el otro)
Mi estructura es la siguiente:

Código HTML:

<section>
<article id="columna1">
<div id="contenido-sup"></div>
<div id="contenido-inf"></div>
</article>
<article id="columna2">
<div id="contenido-sup"></div>
<div id="contenido-inf"></div>
</article>
</section>
 

El problema me viene en que los divs de contenido-sup varían de tamaño...lo mismo me puede medir uno 200px que el otro 500px... y no encuentro la forma de controlarlo

[metacortex]

El problema es la estructura. Al asignar un contenedor individual cada div #contenido-sup con otro #contenido-inf te encierras tú mismo en un callejón sin salida. Coloca los superiores en un contenedor y los inferiores en otro, se te hará más fácil resolver el problema.

[pzin]

Aparte, en lugar de identificadores eso deberían de ser clases.

[madman_18]

Iniciado por metacortex

El problema es la estructura. Al asignar un contenedor individual cada div #contenido-sup con otro #contenido-inf te encierras tú mismo en un callejón sin salida. Coloca los superiores en un contenedor y los inferiores en otro, se te hará más fácil resolver el problema.

Sí, le dí vueltas a la estructura y es así pero....la cosa está en que si hago lo que comentas, ¿cómo podría hacer que todo lo que está actualmente en el bloque de la derecha quede por debajo de todo lo que tengo (con la estructura actual me refiero) del bloque izquierda?