Hi,
ein paar Anregungen:
Dein "content-cont" bekommt padding(also z.B. padding: 20px;).
Als Hintergrundbild nimmst Du eine Grafik die mit dem linken Rand (Schatten) anfängt und mit dem rechten Rand aufhört (in der Mitte weiß).
<div id="content_cont">
Blindtext bla bla bla
</div>
Das CSS dazu:
#content_cont{padding:20px;background: #fff url('dein_background.jpg') repeat-y center top;min-height:400px; height:auto !important; height:400px;}
Dadurch entfallen schon mal die überflüssigen "Spacer"-Div's, die Du um den Blindtext angeordnet hast.
Außerdem hast Du so eine Mindesthöhe von 400px.
Der kleine Hack funktioniert so ab IE6. Normale Browser halten sich an "min-height:400px;" und "height:auto !important;".
Durch das "!important" wird das letzte "height:400px" nicht mehr überschrieben.
Außer z.B. im IE6. Der kann mit "min-height" nix anfangen, und mit "!important" auch nicht. Und "height:400px" interpretiert der IE6 so, dass er den Bereich 400px hoch macht, und wenn der Inhalt da nicht komplett rein passt, wird der Bereich halt größer.
Zum Footer:
sofern Du die drei "Boxen" immer auf der Höhe wie im Screenshot haben möchtest, könntest Du einfach eine große Grafik als Footer-Hintergrund nehmen, welche die drei Boxen bereits beinhaltet. Dann wäre es egal, wenn die entsprechenden Content-Div's dazu nicht die gleiche Höhe haben.
Alternativ heisst der Begriff den Du suchst "faux columns" - das alte Problem mehrerer Div's nebeneinander mit verschiedenen Inhalten aber trotzdem mit gleicher Höhe.
Die Suchmaschine Deines Vertrauens sollte Dir da auf jeden Fall weiterhelfen.
