Resizing von Elementen

Abend!

Ich brauche für meine Homepage folgendes Layout (habs schnell mit einem GUI Designer zusammengeklickt):
Normal
Vergrößert
Das ganze Fenster soll quasi die Homepage sein und die Buttons Elemente in der Homepage (letztlich reichen farbige Rechtecke).

1. Wie würde ich das aufbauen? Mit CSS <div>?
2. Wie erreiche ein Resize Verhalten wie in den 2 Screenshots?
Wie ihr sehen könnt gibt 4 "Bereiche": Links oben und rechts oben einen Bereich, einen unten und oben in der Mitte 3 Bereiche. Ihr seht auf den Screenshots auch, wie die sich verhalten sollen: Der untere soll IMMER die ganze Breite einnehmen, aber konstant hoch bleiben.
Die Bereiche in den Ecken (links oben und rechts oben) sollen konstant groß bleiben und in den Ecken kleben. Und die 3 Bereiche oben in der Mitte sollen gleich groß bleiben, immer zentriert in der Mitte sein und den selben Abstand zueinander behalten (zb. 30 Pixel Lücke dazwischen).
Wie definiert man in HTML/CSS so ein Resize verhalten?

Danke!

DaRe

Nach meiner Erfarhung, die allerdings schon ein Jahr alt ist:

1. Lege linke Spalte an(div) setze dieses float:left;

2. Lege rechte Spalte an(div) setze dieses float:right;

3. Lege mittlere Spalte an(div)

4. Lege footer an(div) setze dieses clear:both;

In mittlerer Spalte musst du die 3 Button nochmal zentrieren:
5. Lege container an(div) setze diesen margin:0px auto;

Wie du in container deine Button dann noch zueinander Abstände einrichtest, bleibt dir dann überlassen.

Dieses Layout hat(Edit: soweit ich noch weiß) allerdings ein Problem: DIE MITTLERE SPALTE sollte stehts GRÖßER(height!), ALS deren FLANKEN sein.