Spielkarten-Layout

[nonok]

Liebe Fachleute,

für meine Webseite möchte ich die einzelnen Elemente (kurze Texte, Listen, Bilder etc) gern als Bauklötzchen oder Spielkarten fester Grösse anzeigen lassen. So eine Spielkarte hat einen Kopf und einen Inhaltsteil und im Gebrauch dann jeweils die Form

<div class="karte">
    <div class="kopf">
      Die Ueberschrift steht hier
    </div>
    <div class="inhalt">
      Hier kommt dann der Text oder sowas.......
    </div>
  </div>

Der Inhalt soll beliebig lang werden können und der Inhaltsteil soll dafür standard mit Skrollbalken versehen sein.

Mein bestes Ergebnis habe ich bisher mit der folgenden Stil-Angabe erzielt:

.karte {
    display: table;
    width: 250px;
    height: 300px;
    border-style: solid;
    padding: 4px;
    margin: 8px;
  }
  .kopf {
    display: table-row;
    height: 50px;
    text-align: center;
  }
  .inhalt{
    height: 250px;
    overflow: scroll;
    text-align: left;
  }

Es erscheinen gleich-grosse Karten mit den genannten Eigenschaften. Aber sie sind alle in einer Linie unereinander am linken Bildrand angeordnet. Ich möchte aber, dass die Karten sich so anordnen, dass sie jeweils das Fester in der Breite ausfüllen und das also bei schmalem Fenster z.b. drei, bei breitem Fenster aber sechs Karten in einer Reihe nebeneinander liegen.

Ich habe versucht, das body-Tag mit display:inline zu versehen, aber das ändert nichts. Sowohl im Konqueror als auch im Firefox bleibt alles steif in einer Spalte stehen.

Was kann ich tun?