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

[hth]

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

[Linuchs]

kann deine Beschreibung nicht nachvollziehen.

Mit Opera 12.16 unter Linux sehe ich drei farbig umrandete Container.

Der rote enthält links einen blauen und rechts einen grünen. Beim Verkleinern des Viewports sowie beim Vergrößern der Schrift verschwindet der grüne sofort unter den blauen, ohne dass blaue schmäler geworden wäre.

Erst wenn der Viewport für die ursprüngliche Breite des blauen nicht mehr reicht, wird er schmäler.

Linuchs

[Linuchs]

meinen vorherigen Beitrag bitte stornieren.

Hatte dich so verstanden, dass der eine Container **unter** den anderen rutscht, also z-index-mäßig.

Und dann habe ich mich selbst so ausgedrückt. Er rutscht zweidimensional unter den anderen, so wie du es beschreibst.

[Linuchs]

probiere mal aus, <article> einen rechten Rand zu geben, um den Platz für <nav> freizuhalten.

[hth]

Hi.

probiere mal aus, <article> einen rechten Rand zu geben, um den Platz für <nav> freizuhalten.

Der Platz wird dummerweise nicht freigehalten, sondern ist dann einfach, na ja, weg. Wenn ich <article/> ein margin-right verpasse (so war's gemeint, oder?), wird <nav/> einfach umso früher „verdrängt“. Hoffe, das ist verständlich. :-)

Grüße,
hth

[Linuchs]

Hi.

probiere mal aus, <article> einen rechten Rand zu geben, um den Platz für <nav> freizuhalten.

Der Platz wird dummerweise nicht freigehalten, sondern ist dann einfach, na ja, weg. Wenn ich <article/> ein margin-right verpasse (so war's gemeint, oder?), wird <nav/> einfach umso früher „verdrängt“. Hoffe, das ist verständlich. :-)

Das heisst, der Platz wäre da, aber <nav> nutzt ihn nicht? Dann packe <nav> mit position:absolute hinein.

Ich denke, das float ist unsinnig, du willst ja gar nicht floaten.

Linuchs

[hth]

Hi.

Das heisst, der Platz wäre da, aber <nav> nutzt ihn nicht? Dann packe <nav> mit position:absolute hinein.

Ich denke, das float ist unsinnig, du willst ja gar nicht floaten.

Ich will/muß schon floaten. Absolute Positionierung ist zwar ein naheliegender Gedanke, in diesem Fall aber schwer zu machen, weil man sich mit position:absolute nicht am rechten Rand des Eltern-Elements ausrichten kann. Das müßte ich hier aber tun.

Gruß,
hth

[Linuchs]

Ho,

Absolute Positionierung ist zwar ein naheliegender Gedanke, in diesem Fall aber schwer zu machen, weil man sich mit position:absolute nicht am rechten Rand des Eltern-Elements ausrichten kann. Das müßte ich hier aber tun.

Wie bitte?

elternelement {position:relative;}
kindelement {position:absolute; right:0;}

Linuchs

[hth]

Hi.

elternelement {position:relative;}
kindelement {position:absolute; right:0;}

Oooookay. Das eine Problem wäre damit gelöst, ein ganz neues Problem ist, daß ich mir den Rest der Nacht wie der hinterletzte Depp vorkommen werde. ;-) Trotzdem tausend Dank, das löst mein Problem.

Grüße,
hth

[molily]

Hallo Holger,

Der Platz wird dummerweise nicht freigehalten, sondern ist dann einfach, na ja, weg. Wenn ich <article/> ein margin-right verpasse (so war's gemeint, oder?), wird <nav/> einfach umso früher „verdrängt“. Hoffe, das ist verständlich. :-)

Linuchs meinte vermutlich das hier:
http://dabblet.com/gist/7743691

Grüße,
Mathias

[hth]

Hi molily.

Linuchs meinte vermutlich das hier:
http://dabblet.com/gist/7743691

Ja, aber da liegt <nav/> im Quelltext vor <article/>, wenn ich das richtig sehe. Das wollte ich gerade vermeiden. Linuchs' Lösung mit absoluter Positionierung funktioniert für meine Zwecke aber tadellos. (Vorausgesetzt, <nav/> wird nicht zu voll/hoch.)

Grüße,
hth