hth: „Flüssiges“ Layout mit float und max-width

Beitrag lesen

Hi.

Geht um ein eigentlich sehr simples Layout: ein Container, für den eine bestimmte Maximalbreite definiert ist, darin zwei Spalten, einmal rechts die Seitennavigation, die eine fixe Breite benötigt. Links davon der eigentliche Artikelinhalt, dessen Breite sich anpassen soll (max-width und min-width). Ich habe eine vereinfachte Version des Ganzen zur Veranschaulichung unter http://holger.thoelking.name/self.html abgelegt.

Das Problem zeigt sich, wenn man die Breite des Fensters ausreichend verringert: statt daß sich der Textinhalt (blau) in der Breite anpaßt, bis min-width:20em erreicht ist, wird zuallererst die „Navigation“ (grün, width:15em) unter den Textinhalt geschoben. Ich schätze, das ist völlig standardkonformes Verhalten, aber eben nicht das gewünschte – die Box sollte immer und unter allen Umständen rechts vom Textinhalt beiben. Verschiedene Experimente mit overflow brachten nichts, und Alternativen mit absoluter Positionierung gestalten sich wegen der variablen Breite des Containers schwierig.

Was ich außerdem erwogen und verworfen habe: im Quelltext die Navigation VOR den Artikelinhalt setzen und rechts floaten lassen. Das empfinde ich aber als unsauber, trotz der Möglichkeit, mit <main/> zu arbeiten. Ich könnte außerdem dem „Container“ (<body/> in diesem Fall] ein fixes width verpassen. Mit all den Problemen freilich, die das mit sich brächte.

Gibt es irgendwelche Ideen und Vorschläge?

Danke vorab,
hth