Hallo Lotti,
ich denke, das lässt sich lösen, indem du Spalten ineinander verschachtelst. Die Überschrift, die über mehrere (innere) Spalten geht, befindet sich dann in der äußeren Spalte. Beispiel:
<div class="aussen">
<h2>Überschrift über Spalte 1 und 2</h2>
<div class="innen">
<h3>Überschrift über Spalte 1</h3>
</div>
<div class="innen">
<h3>Überschrift über Spalte 2</h3>
</div>
<div class="clear"></div>
</div>
So ein Aufbau wäre in sich auch logisch
Die Abstände zwischen den Überschriften beseitigst du in dem obigen Beispiel, indem du für *.aussen den Innenabstand, für h2 margin-bottom, für *.innen den Außenabstand und padding-top sowie für h3 margin-top auf 0 setzt
.aussen { padding:0; }
.ausen h2 { margin-bottom:0; }
.innen { float:left; margin:0; padding-top:0; }
.innen h3 { margin-top:0; }
.clear { clear:left; }
Nachtrag
Momentan hab ich das durch Spalte1 und Spalte 2 gelöst, die eine mit 30 % und die Andere mit ich glaub 62%.
Das Verhältnis sollte dann schon eins zu zwei betragen, also z.B. 30% und 60% - die inneren Spalten dann 50%, was 30% auf der höheren Ebene entspricht. Zusätzliche Voraussetzung, dass die Spalten dann exakt übereinander passen, ist, dass die äußeren Spalten entweder keine Außenabstände aufweisen (also margin:0) - etwaige Abstände zwischen den Spalten sollten dann als Innenabstand realisiert werden. oder die Außenabstände müssen entsprechend zu den Breiten hinzugerechnet werden (was voraussetzt, dass beide in der selben Maßeinheit angegeben sind (Prozent oder Pixel))