Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Wir brauchen mehrere Div-Container welche dynamisch per Typo3 gefüllt werden. Der Designer hat sich gemeinerweise ausgedacht, dass die Spalten stets die gleiche Höhe einnehmen und mit einer schönen Hintergrundfarbe versehen sein sollen.
Der Redakteur kann dabei bestimmen ob ein Inhaltselement ein Viertel oder zwei Viertel einnehmen soll. Dieser HTML Code wird erzeugt:

<div class="wrap">
	<div class="box">Bla bla bla</div>
	<div class="box">Blu blu blu</div>
	<div class="box">Bingo Bongo</div>
</div>

Lösung: Bei Ejeliot habe ich eine spannende Möglichkeit entdeckt. Die Spalten erhalten einen großen Abstand per Padding mit gleichzeitigem negativen Margin! Der Trick liegt im umfassenden Container. Per overflow:hidden; werden die überflüssigen Abstände entfernt! Das CSS ist in etwa dieses hier:

.wrap {
  overflow:hidden;
}
.box {
  float:left;
  padding:5px 5px 2005px 5px;
  margin-bottom:-2000px;
}

Über die 5 Pixel unterschied im Padding bekommen die Boxen den gleichen Abstand nach unten wie zu den anderen Seiten. So schön und effektiv das vorgehen auch ist, es gibt leider ein paar Probleme (Position is everything). Bin gespannt wann sie mich eine ganze Nacht lang aufhalten…

Davor lohnt sich aber ein Blick auf das komplett in JavaScript geschrieben SuperMario Spielchen von nihilogic. Ohne externe Grafiken! Herrlich.