Oliver Giesen: float: topleft oder so?

'n Abend!

Ich versuche gerade eine Seite zu entwerfen, auf der dynamisch verschiedene Artikel angezeigt werden sollen. Jeder Artikel soll in einem eigenen Rahmen (div) erscheinen. Das Layout soll mehrspaltig sein, sofern die Fensterbreite dies zuläßt. Die Anzahl der Spalten soll sich dynamisch nach der Größe des Browserfensters richten.

Solange alle Artikel gleich hoch sind, funktioniert dies prinzipiell schon ganz gut durch Verwendung von float:left und einer fixen Breite für alle Artikel. Die Artikel werden von links nach rechts angeordnet und sobald ein Artikel nicht mehr in eine Zeile passt, landet er in der nächsten.

Das Problem ist nur, daß die Artikel unterschiedlich hoch sein können. Wenn der erste Artikel recht kurz ist, darauf ein längerer folgt und dann einer kommt, der nicht mehr in die Zeile passt, erscheint dieser unterhalb des zweiten, d.h. mit vertikalem Abstand zu dem in der selben Spalte direkt darüber befindlichen ersten Artikel.

Schlimmer wird es noch wenn ein dritter Artikel in der ersten Zeile Platz hat, der aber wiederum kürzer als der vorherige ist. Der Artikel, der dann darauf folgt landet nämlich nicht am Anfang der nächsten Zeile, sondern bleibt in der dritten Spalte "hängen", so daß links unten riesige Lücken entstehen.

Läßt es sich irgendwie realisieren, daß die Artikel von links nach rechts angeordnet werden, nach einem Zeilenumbruch aber immer wieder ganz links angefangen wird anstatt das DIV nur soweit nach links zu rücken, wie gerade möglich? Im Idealfall sollten sie dort dann auch wieder "bis zum Anschlag" nach oben gerückt werden.

Danke,

Oliver

  1. Hi,

    Läßt es sich irgendwie realisieren, daß die Artikel von links nach rechts angeordnet werden, nach einem Zeilenumbruch aber immer wieder ganz links angefangen wird anstatt das DIV nur soweit nach links zu rücken, wie gerade möglich?

    Nicht wirklich. Du müßtest schon wissen oder berechnen, wie hoch das höchste Element ist und dann Platzhalter einfügen, wie ich das in <http://www.td-rot-weiss-duesseldorf.de/sportbereich/std-paare.html@ritle=dieser Fotofalerie> gemacht habe.

    freundliche Grüße
    Ingo

    1. Hi,

      dieser Fotofagerie

      Murks. Ich bräuchte wohl langsam doch mal eine neue Tastatur...;-)

      freundliche Grüße
      Ingo

      1. Hi,

        dieser Fotofagerie
        Murks. Ich bräuchte wohl langsam doch mal eine neue Tastatur...;-)

        Was ist eine Fagerie? ;-)

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hi,

          Was ist eine Fagerie? ;-)

          jaja... lästere nur. ;-)
          Ich habe hier eine schwarze Tastatur mit ziemlich abgenutzten (sprich teilweise nicht mehr erkennbaren) Aufschriften, die auch noch einige Tastendrücke schlabbert. Dafür prellt sie nicht und hat zig Zusatztasten, von denen ich gerade mal den "Calculator" nutze. Und mein Einhand-Tippsystem ist leider auch nicht perfekt geeicht.

          freundliche Grüße
          Ingo

          1. Hi,

            Und mein Einhand-Tippsystem ist leider auch nicht perfekt geeicht.

            Sah irgendwie nach 1-Finger-Blindschreiben aus ...

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hi,

              Sah irgendwie nach 1-Finger-Blindschreiben aus ...

              gut erkannt. Mein Monitor liefert hier auf der Tastatur mehr Licht als die übrige Beleuchtung. ;-)

              freundliche Grüße
              Ingo