COLOSSUS: Zeilenumbruch bei DIV und float:left verhindern

Beitrag lesen

SELF-Forum

Zeilenumbruch bei DIV und float:left verhindern

COLOSSUS
– Informationen zu den Bewertungsregeln

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?

Beitrag melden
–
Informationen zu den Bewertungsregeln