Hallo Maik...
...und all' die anderen.

Um zwei vertikale Reihen gleich breiter <div> untereinander anzuordnen habe ich bisher zwei 'Ober-div' nebeneinandergestellt und diese mit Sub-divs der Reihe nach gefüllt.

Daraus ergaben sich zuletzt zwei Nachteile:
Durch den Aufbau der ersten Spalte entstand immer ein stufenweiser Aufbau so daß die zweite Spalte zeitweise sekundenlang erstmal leer blieb. Außerdem war der Pflegeaufwand, um die rechte mit der linken Oberspalte gleichmäßig aktuell und in einem optischen Gleichgewicht zu halten zuletzt zunehmend größer.

Was muß ich machen, um 1 Container (statt zwei2) gleichmaäßig von oben nach unten mit zwei Reihen gleich breiter, aber ungleich hoher Sub-divs zu füllen. 'Float' und 'position' habe ich zwar einigermaßen verstanden, komme aber mit meinen eigenen Experimenten auf keinen grünen Zweig.

Was mir fehlt, ist so eine Art 'float: under', oder eine komplett neue Idee. Kennt evtl jemand (zur Not) eine JavaScript-Routine die so etwas übernimmt? Es fällt mir auch keine passende Bezeichnung für dieses Problem ein, so daß ich mit der Suche nach anderweitigen Problemlösungen nicht weitergekommen bin. Ich nehme mal an, daß dieses Thema schon tausendmal behandelt wurde, aber wo?!.

Wie es nicht aussehen sollte zeigt das Muster an folgender Adresse.
http://www.weezerlinks.de/sub/muster/Muster100109.html

Wär' schon nicht schlecht wenn jemandem etwas dazu einfallen würde.

Viel Gruß
HH

Zitat von TinniTuss

... Um zwei vertikale Reihen gleich breiter <div> untereinander anzuordnen habe ich bisher zwei 'Ober-div' nebeneinandergestellt und diese mit Sub-divs der Reihe nach gefüllt...

Hallo,
deine Beschreibung ist unverständlich: Wenn du wirklich zwei (und tatsächlich nur zwei) "Ober-DIV" nebeneinander stellst und "diese mit Sub-divs der Reihe nach" füllst, dann ergibt sich (bei mir) kein "stufenweiser Aufbau".

Benutze doch einfach mal eine Suchmaschine mit dem Suchwort "2 Spalten-Layout" und sieh dir bei den Treffer mal die Realisierung an.

Übrigens ist der Link in deinem Post keine HTML-Datei sondern nur ein HTML-Fragment, so dass in manchen Browsern nur der Quelltext dargestllt wird.

float: under;

Ist ja nur drollig

Wie wäre es denn zur Abwechslung mit "Down Under"?

Und wie hela es schon richtig umrissen und auf den Punkt gebracht hat, wenn du deine Divs in zwei übergeordnete umfliessende Spaltenblöcke packst, ergeben sich da keine vertikalen Lücken oder Abstände zu den benachbarten DIVs.

mfg Maik

Lesen hela, lesen...!

"...was muß ich machen, um 1 Container (statt zwei2) gleichmaäßig von oben nach unten mit zwei Reihen gleich breiter, aber ungleich hoher Sub-divs zu füllen?"

Stufenweise heißt, die Inhalte im linken Schlauch werden erstmal bis in 800 Meter Tiefe aufgebaut, während sich im sichtbaren obersten bereich sekundenlang nichts tut. Nenn' es von mir aus zögerlich, ruckelig oder sonstwie, wenn Du 'stufenweise' mißverständlich findest.
Ich dachte, alte Hasen würden erkennen, daß es sich bei dem dargestellten "html" (in Anführungszeichen) nur um das grundsätzliche Schema handelt. Für Dich, das selbe noch mal als Bild.

http://www.weezerlinks.de/sub/muster/muster.jpg

Maik:
Ich will ja gerade weg von zwei nebeneinanderliegenden <div>. Ihr empfehlt mir genau das, was ich in meiner ersten Zeile unter 'bisher' beschrieben habe, und was den Zweck nicht erfüllt.

Drück' ich mich wirklich so mißverständlich aus?

HH.

Stellt sich doch eher die Frage, warum du den bewährten Weg verlässt, und dich auf Abwegen begibst, um das Rad neu zu erfinden, was dich letztlich aber nur ins Stolpern bringt.

"Haste keine Probleme, so machste dir halt welche"

Die beiden linken Blöcke, die da nach unten rutschen, sind sicherlich mit der clear-Eigenschaft formatiert. So sind da halt die "CSS-Gesetzmäßigkeiten", gegen die auch kein Kraut gewachsen ist.

mfg Maik

Moin,

das was du vorhast, geht teilweise schon sehr einfach

Es ist Bestandteil von CSS und nennt sich "Multi-Column-Layout".

Leider wird es momentan nur von Safari+FF unterstützt(deswegen "teilweise").

Hallo Maik

...weil der bisherige Weg nicht der bewährte Weg ist/war. Ich wiederhole es gern ein weiteres Mal:

Der Aufbau der linken Spalte dauert zu lange (ca. 50 sub-divs per 'php-include'), im sichtbaren oberen Bereich (rechte Spalte) tut sich einfach zu lange nix...

HH.

Zitat von TinniTuss

Der Aufbau der linken Spalte dauert zu lange (ca. 50 sub-divs per 'php-include')

Und du glaubst ernsthaft, dass sich an diesem Umstand etwas ändert, wenn du im Markup auf einen Spaltenblock verzichtest?

Was gibst du hier lieber den Vortritt? Einem verzögerten Seitenaufbau, der bei dieser Anzahl in der Natur der Sache liegt, oder ein versprengeltes Layout?

mfg Maik

Danke Sven...
... das könnte was sein...

Ich habe den Artikel der zu Deinem Link gehört ganz flüchtig überflogen.
Da werde ich morgen mal ein paar Stunden dran tüfteln.
Mein Holländisch ist nicht so gut. (*)


Wieso hast Du denn meine Problematik überhaupt verstanden ?

Viel Gruß
HH



(*) = Scherz!

Maik,...

... ich verstehe versprenkeltes Layout nicht.


Wenn beim Seitenaufbau die ersten halben Dutzend 'Päckchen' dargestellt sind, zack, zack, links, rechts, links, rechts....
... dann ist ist es mir, und wahrscheinlich dem Besucher auch, gleichgültig ob der Gesamtaufbau 5 Sekunden dauert oder nicht. Was glaubst Du, warum Seiten (wie Bing, wenn ich mich nicht irre...) teilweise sogar erst generiert werden wenn Benutzer nach unten scrollen. Aber für Ajax und Konsorten bin ich leider noch zu 'klein'...

HH.

Entschuldigung, aber du bist doch hier vorstellig geworden, um von diesen versetzten Blöcken erlöst zu werden:



Und in meinen Augen stellen sie ein versprengeltes Layout dar

mfg Maik

Übrigens dürfte dir Svens gutgemeinter Vorschlag auch nicht sonderlich weiterhelfen, da die Blöcke ja nach deiner eigenen Aussage unterschiedliche Höhen besitzen, und sich somit auch hier das gleiche Problem ergibt, dass neben den längeren (höheren) DIVs zwischen den kürzeren ein Abstand entsteht.

mfg Maik

Ach Maik...

...Ich habe ein Layout, das funktioniert, aber im sichtbaren Bereich zu lange braucht.

Dieses versprenkelte Layout ist das, was entsteht, wenn ich den langsamen Weg der Tugend verlasse und mit einem einzigen Container und floats und positions experimentiere ohne auf einen grünen Zweig zu kommen. OK?

Ich brauche keine 'Erlösung', sondern eine Alternative zu dem versprenkelten Layout und meinem funktionierenden, erprobten, aber zu langsamen Aufbau.


Gute Nacht

HH.


PS. Ich kann den Artikel, Svens Empfehlung folgend, noch nicht beurteilen. Ich bin nicht so schnell und offensichtlich eh zu doof!

Zitat von TinniTuss

Lesen hela, lesen...!

Hallo TinniTuss,
danke für deine freundliche Leseaufforderung und dass du dein Problem noch mal näher beschrieben hast. Falls ich dir mit der Bemerkung, dass deine erste Problembeschreibung für mich unverständlich ist, zu nahe getreten sein sollte, dann bitte ich um Entschuldigung. Das wird sicherlich nicht mehr passieren.

Hallo Sven

Wenn man davon absieht, dass das CSS3 Multi-Column Layout bisher erst in einigen Browsern, mit Browserspezifischen Selektoren (z.B. moz-column-width: 200px) funktioniert, so stellt es immerhin eine enorme Erleichterung und beinahe perfekte Umsetzung eines Mehrspaltigen Layouts dar. Sogar begonnene Texte der Spalte-1 werden oben in Spalte-2 fortgesetzt. Sehr schön. Allerdings liegt die Betonung immer noch auf mehrspaltig.

Die gleichmäßige Anordnung gleich-breiter aber unterschiedlich hoher sub-divs, ohne unterschiedlich große Vertikale Zwischenräume, in einem einzigen ober-div, ist damit ebenso nicht möglich.

Zur Veranschaulichung wie es idealerweise aussehen sollte:
http://www.weezerlinks.de/sub/muster/ziel.jpg

Mit freundlichen Grüßen
HH.

Hi,

dafür müssten die DIV-Blöcke eine Art "Slalom-Technik" in engen Radien beherrschen, und im gesteckten Kurs auch mal einen Haken nach oben schlagen zu können.

Ich lehn mich ungern aus dem Fenster, aber hier denk ich nicht mehr an "Down Under", sondern eher an "Mission Impossible".

Mit bekannten (fixen) Höhen liessen sie sich in der Mutterbox zumindest absolut positionieren, aber im Umfluß nach oben rutschen lassen ..., ich wüsste nicht wie.

mfg Maik