DIV Layout dynamische Höhenanpassung

[mclu]

Hallo zusammen!
Ich versuche mich gerade an einer Webseite, die über eine Grafik designt wurde.
Hier findet Ihr ein Screenshot.

Alles eigentlich normal:
Links Menü, Oben kommt noch ein fester Logotext rein, rechts soll es grau bleiben.
Nun die Anforderung:

1. Der Text liegt über der Blume.
2. Sollte der Platz nicht reichen vergrößert sich der sichtbare Bereich. Also keine Scrollbars! Dabei soll die Blume da bleiben wo sie ist, aber der Contentbereich “Menügrau-textbereich weiß- Rechts grau“ größer werden. Das heißt, das Layout hat die Mindesthöhe wie im Screenshot, wenn der Text mehr Platz braucht, soll das „Fenster“ größer werden und die Hintergrundfarben so bleiben.
3. DerRote Bereich ist nur der Füller.

Ich bin so weit, dass ich ein DIV für alles mittig positioniere.
In dem gibt es ein DIV für den Headbereich und eins für den Content Bereich (Menü, text, rechts)
Der Textbereich befindet sich in einem DIV Container mit weißer Hintergrundfarbe und darin habe ich ein DIV mit der Hintergrundgrafik Zindex 1 und eins für den Text (transparent, zindex 2).
Das funktioniert super, wenn jedoch der Text größer wird, passen sich die Menu- und die rechte Spalte NICHT an. Könnt Ihr euch das überhaupt so vorstellen?
Am besten einfach mal direkt die Testseite anschauen:
Layout, so wie es normal sein sollte:
Link
Layout, wenn der Text größer wird:
Link

Also, wo liegt der Fehler oder sollte ich das generell anders machen?
Ich habe auch ne Idee mit dem Contentbereichs-DIV, das als Hintergrund eine pixelzeile mit dem grau-weiß-grau enthält…

 

[anna55]

Du könntest dem Div contentwrapper zusätzlich verpassen

display:inline-block;

Müsstest dich dann noch um eine Höhenanpassung der Hintergrundfarbe des Menüs links und des rechten Bereichs kümmern.

 

[mclu]

Super Sache! Das mit der Hintergrundfarbe sollte dann wohl machbar sein
DANKE!!!

 

[kkapsner]

Problem: IE <= 7 kennt inline-block nicht.

 

[mclu]

Gibt es da nen workarround für IE7?
6 wär mir ja egal aber 7 sollte schon gehen...

Ich hab das Hintergrundproblem jetzt mit nem Backgroundimage des contentwrapper gelößt. Das hat eine pixelzeile und wird dann mit repeat-y wiederholt.
Auf IE8 und Firefox sieht es jetzt super aus!

 

[mclu]

Habs gerade mal auf nem IE6 in ner VM getestet. Das sieht dort aber genauso gut auf wie auf IE8 oder FF...
laut:
http://www.quirksmode.org/css/display.html
heißt es für ie 6 und 7:
incomplete: IE 6/7 accepts the value only on elements with a natural display: inline.
Keine Ahnung was das heißt, aber es funktioniert bei mir

Danke nochmal für den Tipp!

 

[kkapsner]

Tatsache - wieder was gelernt.. hatte es immer mit einem DIV getestet und das ist ja Block... Danke für die Info.

 

[anna55]

Tatsache - wieder was gelernt.. hatte es immer mit einem DIV getestet und das ist ja Block... Danke für die Info.

Ja, genau, mclu nutzt es ja mit einem Div und nicht mit einem span, das von Haus aus ein linline-Element ist und das auch mit dieser Qirksmode-Aussage

ncomplete: IE 6/7 accepts the value only on elements with a natural display: inline.

gemeint ist. Deshalb empfehle ich in jedem Fall den Test in nem IE7 und ggf. die Anwendung eines Workarounds, wie z.B. hier: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Runterscrollen bis zur IE7-Beschreibung, die auch hier zur Anwendung kommt.