Problem mit Faux columns

[molily]

Kriegt man mit display:table nicht das Problem, dass die Spalten nicht mehr untereinander angezeigt werden können?

Sie können durch Media Queries untereinander angezeigt werden, falls erforderlich. Da die meisten Float-Layouts mit festen Breiten arbeiten, gibt es diesbezüglich keinen Unterschied zwischen Floats und CSS-Tabellen: Es sind Media Queries nötig, um sie zu serialisieren. Oder bei »Mobile First«: Es sind Media Queries nötig, um sie nebeneinander anzuzeigen.

Ich will, dass die Spalte eine entsprechende Länge hat, nicht dass sie nur so aussieht.

Was ist bei CSS der Unterschied zwischen »es sieht so aus« und »sie ist wirklich so lang«? In den meisten Fällen spielt er keine Rolle.

Und wenn die Spalten immer mindestens bis zum Ende der Seite gehen sollen?

Das geht nicht mit Floats (ohne JavaScript), aber mit Flexbox und Tabellen.

an sich, warum sollte die drei Elemente denn einen Container haben?

Weil es eine Liste von Items ist, die in gewisser Weise angeordnet werden. Klar, das ist nicht notwendigerweise eine semantische Auszeichnung, aber Layoutsysteme erfordern diesen Container. Floats i.d.R. einen Container mit Clearfix. Tabellenzellen einen Container mit display: table. Flexbox-Items erfordern einen Container mit display: flex. Aus UI-Toolkits wie Adobe Flex und XUL kenne ich das genauso.

In HTML sollte für den Container ein möglichst passendes Element gesucht werden. Das kann z.B. section, header, footer, article oder main sein, je nachdem.

Wenn du mir kein Beispiel zeigen kannst (oder es anderweitig erklären kannst) dann bleibe ich eben bei meiner Meinung und die Diskussion ist für mich beendet.

Der Artikel, den ich verlinkt habe, beginnt mit einem Beispiel für display: table/table-cell, und der Rest des Artikels erklärt dieses:
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

Die Grundstruktur ist einfach:

<div style="display: table">  
  <div style="display: table-cell"></div>  
  <div style="display: table-cell"></div>  
  <div style="display: table-cell"></div>  
  <!-- … -->  
</div>

Mathias