float: under;

[TinniTuss]

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

 

[hela]

... 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.

 

[Maik]

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

 

[TinniTuss]

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.

 

[Maik]

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

 

[Sven Mintel]

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").

 

[TinniTuss]

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.

 

[Maik]

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

 

[TinniTuss]

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.

 

[Maik]

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