CSS DIV positionieren

[gfeschu]

Hallo zusammen

Habe ein kleines Problem.
Ich habe 3 verschiedene Divs.

Links am Rand ein Div das in der Breite fix ist aber die Höhe muss dynamisch sein.
Div in der Mitte hat den Content. Es macht etwa 75% der Fläche aus. Die Breite ist also dynamisch. Also wenn man das Fenster kleiner macht, sollte auch dieses Div sich ändern.
Rechts am Rand hat das div eine fixe Breite und eine fixe Höhe. Das Div muss aber immer am Rand sein.

Also nur das mittlere Div muss dynamisch sein.

Ich hab das mit float left (div1) und float right (div3) gelöst. Funktioniert eig gut. Nur auf Safari und FF ist es das Problem, wenn der Content in dem mittleren Div zulange wird, setzt es das Div2 unter Div1.

Siehe Screenshots.

Hat mir jemand einen Tipp?

Lieber Gruss,
gfeschu

 

[Cool Master]

Da musst du per Margin-bottom arbeiten Einfach z.B. dem linken Div ein Margin-bottom: 250px; geben und die sache sollte gelöst sein

 

[j77639]

Wenn kein Platz da ist, dann muss der Inhalt nunmal darunter... Ich würde mir da nicht so sorgen machen, denn ein so schmales Browserfenster hat heutzutage eh keiner mehr

 

[Cool Master]

@j77639

Würde ich nicht sagen. Ich sage nur Mobile devices...

 

[Daaron]

Spontaner Tip: Nimm ein Holy Grail Template als Basis und ergänze es um ein paar clevere Tricks für mobile Geräte mit kleinen Displays.

 

[gfeschu]

@j77639

Würde ich nicht sagen. Ich sage nur Mobile devices...

Genau. Mit dem Ipad verschiebt es den Inhalt nach unten. Im IE wird ganz normal bei einer zu langen Beschreibung zB. der Text umgebrochen. Aber beim Safari (ipad) bleibt die länge gleich. Es ist auch kein Nowrap drin oder sonst was.

Wie meinst du das mit margin-bottom genau? Denn das linke div sollte ja genau dort bleiben und nicht weiter oben sein.

Das mit dem Template geht in diesem Falle leider nicht.

Danke für eure Hilfe. Gruss gfeschu

 

[Daaron]

Meist hat man irgend einen Wrapper-Container. Wenn man dem einen margin-bottom mit gibt kann man die inneren Container auf min-height: 100% setzen. Das sollte für die passende Skalierung sorgen...

Außerdem ist es vollkommen korrekt, wenn sich die Ausrichtung auf Mobile Devices von horizontal zu vertikal ändert. Das erhöht die Usability enorm. Schau z.B. mal auf http://www.time.com, wie da die Anpassung gelöst ist.

P.S.: Holy Grail sollte immer gehen. Ist ja nur eine spezielle Art, den Content auszurichten. Normalerweise schreibt man für 3spaltige Ansichten die Blöcke im Code als "L-R-M", Holy Grail ist im Code etwas komplexer, arbeitet dafür aber SEO-freundlich mit "M-L-R".