nicht angemeldet
Zeilenumbruch bei DIV und float:left verhindern
Hallo zusammen.
Ich bin mit der Anordnung meiner DIVs schon ziemlich weit gekommen, doch der letzte Kniff fehlt, damit es sich so verhält, wie ich es möchte.
Folgende Situation: Ich habe einen übergeordneten DIV-Container, der mehrere DIV-Unterelemente enthält. Alle Unterelemente sollen nebeneinander liegen und deren Breite soll dynamisch bleiben (also der Inhalt bestimmt deren Breite).
Überschreitet die Summe aller DIV-Breiten die Breite des DIV-Containers, so soll man im Container horizontal scrollen können.
Hier meine Schnipsel:
div.container {
width: 100%;
height: 100%;
position: relative;
overflow: auto;
white-space: nowrap;"
}
div.subelement {
position: relative;
float: left;
}
<div class="container">
<div class="subelement">Text</div>
<div class="subelement">mittlerer Text</div>
<div class="subelement">gaaaanz langer Text</div>
</div>
Folgendes Problem: Wenn die Breite des Containers nicht ausreicht, werden die weiteren DIV-Elemente in eine neue Zeile gesetzt. Ich möchte aber dann einen Scrollbalken haben, weil die Höhe des Container-DIV im Hauptlayout begrenzt ist.
Das "white-space: nowrap;" hilft hier leider nicht weiter (wahrscheinlich auch logisch, geb ich zu).
Es gibt einen Workaround, der mir aber nicht wirklich gefällt:
Wenn man die Sub-Elemente mittels "position:absolute" und "left"-Pixelangabe anordnet, dann erscheint auch der Scrollbalken und alles ist eigentlich wunderbar. Der Nachteil ist dann aber, dass die Breite der Div-Elemente statisch sein muss, da man mit pixelgenauen Angaben den Aufbau steuert.
Und das möchte ich eigentlich vermeiden.
Sind meine Vorstellungen zu realisieren?
-
Sind meine Vorstellungen zu realisieren?
wie wärs mit fixer variabler breite, aber fixer höhe?
-
Sind meine Vorstellungen zu realisieren?
wie wärs mit fixer variabler breite, aber fixer höhe?Ähm, "fixe variable" Breite?
Da steh ich jetzt irgendwie auf dem Schlauch. Schließt das eine nicht das andere aus?
Oder meinst Du, dass ich den DIV-Container auf sagen wir mal 2000px Breite bringe, um so dem Zeilenumbruch zu umgehen?
Würde auch gehen, aber dann kann man jedes Mal ins Leere scrollen, was auch nicht gerade prall ist.
-
Ähm, "fixe variable" Breite?
ich meinte natürlich "wie wärs mit variabler breite, aber fixer höhe?
.container {
width: 100%;
height: 300px;
overflow-y: auto;
}-
ich meinte natürlich "wie wärs mit variabler breite, aber fixer höhe?
Ja ok. Ich hatte einen Wortdreher schon vermutet, wollte aber lieber nochmal nachhaken. :)
.container {
width: 100%;
height: 300px;
overflow-y: auto;
}Die Idee mit der fixen Höhe hatte ich auch schon. Zumal das DIV, in dem der 100%-100%-Container steckt, eh schon eine durchs Layout vorgegebene, feste Höhe hat.
Aber die Vorgabe einer fixen Höhe hindert den Browser nicht daran, die DIVs trotzdem in mehrere Zeilen umzubrechen. Man scrollt dann halt dennoch nach unten. Und wenn man den Scrollbalken verhindert, wird natürlich trotzdem umgebrochen, nur hat man dann natürlich keine Chance mehr, den umgebrochenen Inhalt zu sehen.
Es ist nur dieser blöde automatische Zeilenumbruch, den man anscheinend nicht verhindern kann, weil das "nowrap" keinen Einfluss auf die "float: left"-Elemente hat.
Danke auf jeden Fall für den Tipp.
Ich bin gerne weiter offen für Ideen, wie man das realisieren könnte. Ich werde heute Nachmittag mal 2-3 Screens posten, um das Problem nochmal zu verdeutlichen.
Finalige Grüße :)
-
Die Idee mit der fixen Höhe hatte ich auch schon. Zumal das DIV, in dem der 100%-100%-Container steckt, eh schon eine durchs Layout vorgegebene, feste Höhe hat.
ggf hilft dir ein zusätzliches element
<div id="aussen"> <---------- dieser hier scrollt
<div id="innen"> <--------- dieser dient als container für die drei nachfolgenden kinder
<div id="spalte1" /> <-\ <div id="spalte2" /> <--- die hier floaten nebeneinander
<div id="spalte3" /> <-/
</div>
</div>-
ggf hilft dir ein zusätzliches element
Mmmh, schweben Dir noch spezielle Attribute für das innere DIV vor?
Ein ganz simples DIV ohne weitere Attribute um die DIV-Subelemente hilft nicht, ist ja auch eigentlich klar.
Ich habe nochmal eine kleine Grafik gemacht, die meinen Wunsch veranschaulichen soll.
http://img147.imageshack.us/my.php?image=divproblemzy0.gif
Wären alle DIV-Elemente immer konstant gleich groß, könnte man ohne Probleme mit "position:absolute" und "left: ...px" arbeiten.
Eine der beiden Lösungen muss es wohl sein:
Lösung 1: Vertikales Scrollen, dadurch in den Breiten frei sein.
Lösung 2: Horizontales Scrolleng, dann aber nur mit festen Breiten.
Ich tendiere zu Lösung 1, ist einfach flexibler.
-
-
-
-
-
