Teaserarticle 1

Der mainwrapper wird zentriert.
durch Angabe von "margin:0px auto;"

Teaserarticle 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Teaserarticle 3

Obwohl diese Spalte kürzer ist als die anderen, richtet sich die Größe des Wrappers nach dieser Spalte.
Durch Angabe von "overflow:hidden" im Wrapper

Mainarticle

Das ist schonmal die grobe Struktur für die Aufgabe...bisschen formatiert, bisschen provisorisch zusammengeschustert, wie das Layout selbst :)

Subarticle 1

Die files wurden anständig formatiert...mit 4 Leerzeichen als Einrückung (keine Tabs) und ordentlich eingerückt :) also falls jemand Probleme beim Lösen der Aufgabe hat, kann man das grob verwenden falls nicht bekomme ich sicherlich vom Chef eine Nachricht ;-)

Subarticle 2

Die Höhe der Divs wurde so gesetzt, dass es dem Bild entspricht...Sowas als website wäre eher suboptimal...der freie Platz unterm Footer sollte nicht zu sehen sein...aber im Bild scheinbar so gewollt.