nicht angemeldet
position:fixed und trotzdem float:left, geht das?
Hallo zusammen,
folgendes Problem:
Ich habe ein zweispaltiges Layout, wobei die linke Spalte die Navigation enthält und die rechte den Inhalt.
Die linke Spalte soll nicht aus dem Viewport scrollen, wenn die Seite gescrollt wird.
Dazu habe ich das Navigations-Div (links) per CSS auf position:fixed gesetzt. Folglich rutscht die rechte Spalte an den linken Rand und wird von der ersten Spalte überdeckt. Jetzt könnte ich natürlich dem DIV der rechten Spalte ein padding-left mit dem Wert der Breite der ersten Spalte mit auf den Weg geben. Das hätte aber den Nachteil, dass der Abstand bzw. die für die Navigation zur Verfügung stehende Breite fest vorgegeben ist. Ich möchte aber, dass die rechte Spalte abhängig vom Inhalt der ersten Spalte positioniert wird. Ich verwalte die Seite mit einem CMS und will nicht jedesmal, wenn ein Artikel mit einer längeren Überschrift (=längerer Linktext in der linken Spalte) verfasst wird, ins CSS und manuell das Padding nachführen.
Kennt da jemand einen Trick, wie ich ein DIV mit position:fixed trotzdem umfließen (float:left) lassen kann?
Ich hoffe, ich habe das Problem verständlich genug umschrieben...
Bin für jeden Tipp dankbar,
Tobias
-
-
Hallo Dave, vielen Dank für die schnelle Antwort!
Im Prinzip ist es das, nur dass jetzt an der rechten Seite zwei Scrollbalken nebeneinander auftauchen, wenn man das Browserfenster verkleinert. Einer für das Inhalts-Div und einer für den kompletten Viewport.
Auch würde ich gerne den horizontalen Scrollbalken verhindern, der nur im Inhalts-Div erscheint.D.h. position:fixed war das grundlegend falsche Werkzeug für meinen Zweck?
-
Hi,
Im Prinzip ist es das, nur dass jetzt an der rechten Seite zwei Scrollbalken nebeneinander auftauchen, wenn man das Browserfenster verkleinert.
Welchen Browser verwendest du?
Bei mir tauchen weder im Firefox noch im Chrome zwei vertikale Scrollbars auf wenn ich das Fenster kleiner mache.Auch würde ich gerne den horizontalen Scrollbalken verhindern, der nur im Inhalts-Div erscheint.
Da fällt mir im Moment kein direkter Weg ein. Allerdings sollte man bei Websiten zwecks Usability generell auf horizontale Scrollbalken verzichten.
Ist es evtl. eine Lösung dem body-Element einfach eine min-width zu geben, so dass kein horizontaler Scrollbalken mehr erscheint oder zumindest sehr unwahrscheinlich ist?D.h. position:fixed war das grundlegend falsche Werkzeug für meinen Zweck?
positioned: fixed;nimmt das betroffene Element aus dem Elementfluss. Wenn du das nicht möchtest ist es das falsche.~dave
-
Super!
Mein Fehler war, dass ich den DIVS gleich noch ein Padding oder Margin mitgegeben habe. Wenn man in den DIVS jeweils noch einmal ein DIV anlegt und in diesem zweiten DIV dann die Abstände einstellt, funktioniert alles wie gewünscht. Vielen Dank Dave für die Hilfe!Der horizontale Scrollbalken, der beim verkleinern des Viewports im Content DIV erscheint, lässt sich vermutlich nicht unterdrücken... ? Ich habe im Content-DIV größtenteils Bilder. Gibt also keinen Textumbruch beim verkleinern des Fensters.
-
Nachtrag:
Um zu vermeiden, dass zwei Scrollbalken erscheinen, wenn das Fenster so klein gezogen wird, dass auch der Navigationsbereich angeschnitten ist, müsste noch ein overflow:hidden für das Navigations-Div ins css.
-
-
-
-