Floating CSS-Layout

[Captain]

Hi,

ich habe eine Problem mit einem reinen CSS-Layout. Vielleicht kann mir jemand etwas unter die Arme greifen.

--------------------

• Div 1            -
  --------------------
• Div -  Div 3     -
  -  2  -            -
  -     -            -
  --------------------

Ich habe ein Layout mit drei Divs als Container. Div 1 wird ganz normal links oben angeordnet und bleibt auch dort. Div 2 hat eine feste Breite und "float:left". Sonst gibt es bei den dreien keine weiteren Positions-, Breiten oder Float-Angaben.
In Div 3 befindet sich ein weiteres Div mit "float:right" und fester Breite. Dadurch stehen Div 4 und Div 2 auf gleicher Höhe und Div 4 immer rechts am Rand. Die Lücke zwischen 4 und 2 ändert ihre Grösse je nach Fenstergrösse. Aber wenn das Fenster zu klein wird, rutscht Div 3 (inklusive 4) unter Div 2. Gibt es eine Möglichkeit das zu verhindern, also dafür zu sorgen, das 2 und 3+4 immer auf der gleichen Höhe bleiben und ab einer gewissen Grösse statt dessen Scrollbalken angezeigt werden, die auch allgemein funktioniert?

Danke für jeden Tip.

Gruss
Captain

[at]

Hallo.

Gibt es eine Möglichkeit das zu verhindern, also dafür zu sorgen, das 2 und 3+4 immer auf der gleichen Höhe bleiben und ab einer gewissen Grösse statt dessen Scrollbalken angezeigt werden, die auch allgemein funktioniert?

Du kannst ein weiteres <div> um Nr. 2 und 3 legen, welches du entsprechend formatierst. Allerdings finde ich dies erstens wenig elegant und zweitens unpraktisch in der Handhabung.
MfG, at

[Captain]

Du kannst ein weiteres <div> um Nr. 2 und 3 legen, welches du entsprechend formatierst. Allerdings finde ich dies erstens wenig elegant und zweitens unpraktisch in der Handhabung.
MfG, at

Wie soll das gehen, ohne das der variable Zwischenraum verloren geht, min- oder max-width funktioniert ja nur in einer Minderheit der Browser.

Captain

[at]

Hallo.

Du kannst ein weiteres <div> um Nr. 2 und 3 legen, welches du entsprechend formatierst. Allerdings finde ich dies erstens wenig elegant und zweitens unpraktisch in der Handhabung.

Wie soll das gehen, ohne das der variable Zwischenraum verloren geht, min- oder max-width funktioniert ja nur in einer Minderheit der Browser.

Stimmt, ich hatte "drittens" vergessen ;-)
MfG, at

[Cyx23]

Hallo,

.. also dafür zu sorgen, das 2 und 3+4 immer auf der gleichen Höhe bleiben und ab einer gewissen Grösse statt dessen Scrollbalken angezeigt werden, die auch allgemein funktioniert?

da gibt es sicher mehrere Möglichkeiten mit width und padding.

Grüsse

Cyx23

[Captain]

Ich habe ein Layout mit drei Divs als Container. Div 1 wird ganz normal links oben angeordnet und bleibt auch dort. Div 2 hat eine feste Breite und "float:left". Sonst gibt es bei den dreien keine weiteren Positions-, Breiten oder Float-Angaben.
In Div 3 befindet sich ein weiteres Div mit "float:right" und fester Breite. Dadurch stehen Div 4 und Div 2 auf gleicher Höhe und Div 4 immer rechts am Rand. Die Lücke zwischen 4 und 2 ändert ihre Grösse je nach Fenstergrösse. Aber wenn das Fenster zu klein wird, rutscht Div 3 (inklusive 4) unter Div 2. Gibt es eine Möglichkeit das zu verhindern, also dafür zu sorgen, das 2 und 3+4 immer auf der gleichen Höhe bleiben und ab einer gewissen Grösse statt dessen Scrollbalken angezeigt werden, die auch allgemein funktioniert?

Ich hab das Probem inzwischen gelöst, zumindest visuell. Intern musste ich die Container umstrukturieren und mit position:absolute arbeiten.

Gruss
Captain

[at]

Hallo.

Ich hab das Probem inzwischen gelöst, zumindest visuell. Intern musste ich die Container umstrukturieren und mit position:absolute arbeiten.

Dann arbeitest du bei den Positionsangaben hoffentlich auch mit "em" oder "ex", damit dein Layout auch eine Wechsel der Schriftgröße verkraftet.
MfG, at