Es sieht so einfach aus, aber nach stundenlangem Rumprobieren bin ich noch zu keiner vernünftigen Lösung gekommen.
Ist folgendes überhaupt mit CSS (ohne Tabellen) möglich?



Mehrere Überschriften (blau) sollen sich über den kompletten Inhaltsbereich ausdehnen.
Unter den Überschriften sollen jeweils zwei Spalten (gelb) entstehen.

Kein Problem: Links floatet ul#navi, und rechts div#inhalt, das wiederum die Überschriften sowie die gelben divs enthält.

Und wie bekomme ich die gelben divs nebeneinander und die blaue Überschrift darunter?

float: left;

clear: left;

Ich habe noch einen Kasten drumrumgebaut, der die Gesamtbreite beschränkt.
Navigation, Inhaltsbereich und die gelben Bereiche floaten links.

Das komplette Beispiel: Layoutbeispiel

div.Umbruch brauchst Du nicht, da auch h2 clearen kann, und div#Inhalt sollte eine Breite bekommen, da float ohne width in dieser Konstellation relativ unberechenbar ist (z.B. zerhauen ältere 7er-Versionen von Opera das Design). Es ist aber auch kein Problem, hier eine Breite zu vergeben, da ja alle übrigen Breiten bekannt sind.