Workshops zu CSSScalable Vector GraphicsBilderwandWeb ServicesWeblog

Tabellenloses Design

Der Quellcode für die Container:

.dreisp {
width:27%;
float:left;
background:#eee;
padding:10px;
border:1px dotted #000;
height:600px;
}

Natürlich kann man auch ohne "border" arbeiten.
Der Quellcode für diesen Container:

ist derselbe.
Die drei Container liegen nebenander (float) und ihre Größe ist in Prozent angegeben. Das hat den Vorteil, dass sie (fast) unabhängig von der Auflösung sind.

Alte Browser zeigen hier manchmal seltsame Dinge an, weil "padding" und "float" nicht richtig interpretiert werden.

Der Quellcode für diesen Container:

ist nochmal derselbe.
Auf Grund des Fehlers im Box Modell des Internet Explorers muss man mit den Größenangaben der Container sorgfältig umgehen. Es kann sonst vorkommen, dass sie nicht nebeneinander, sondern untereinander angeordnet werden.

Wenn auch die Höhe angegeben wird, erreicht man ein gleiches Aussehen bei den Spalten, trotz unterschiedlicher Inhaltsmenge.

Eine Aufteilung in vier oder mehr Spalten funktioniert genauso.