{HTML » CSS} Wie stelle ich mit CSS mehrere divs horizontal nebeneinander dar? @CODEKICKER

Wie stelle ich mit CSS mehrere divs horizontal nebeneinander dar?

                    Ich meine so:

    Text Text Text Text Text
    |div1| |div2| |div3|
    Text Text Text Text Text

Im Prinzip wie mit einer Tabelle, die eine Zeile hat. Nur eben ohne Tabelle!

17.07.2009

nilz

592 ● 1 ● 2 ● 8

3 Antworten

                    Um div-Container oder allgemeiner gesagt alle Blockelemente nebeneinander, also dem normalen Textfluß folgend, darzustellen, kann man sie z.B. mit float: left; formatieren. Dies funktioniert solange zufriedenstellend wie alle "Spalten" (technisch oder erzwungen) die gleiche Höhe haben. Eine "echte" Spaltenunterstützung wird es wohl erst mit CSS 3 geben und da alle Browser der aktuellen generation "nur" CSS 2 interpretieren (und auch das nicht immer durchgängig und korrekt) wird es wohl noch eine Weile dauern, bis dieses Feature konkret nutzbar ist.

Den Versuch eine Tabelle mit über- und nebeneinander positionierten div-Containern darstellen zu wollen sollte man allerdings lassen, außer man bewegt sich gerne am Rande des Wahnsinns und hat noch zu wenig graue Haare. Für die Darstellung einer Tabelle gibt es ein sehr nettes Tag: **&lt;table&gt;**

27.07.2009

FalkP

3,3k ● 3 ● 8

1		Danke - man muss aber unbedingt noch das Attribut: clear: both; hinzufügen. Das mit dem Tag zur Table wurde wohl abgeschnitten, könntest du das vielleicht als Kommentar noch hinzufügen? – nilz 27.07.2009
2		"Dies funktioniert solange zufriedenstellend wie alle "Spalten" (technisch oder erzwungen) die gleiche Höhe haben." >> Was aber mittels CSS auch in den Griff zu bekommen ist. Stichwort hier: equal height columns http://www.positioniseverything.net/articles/onetruelayout/equalheight – kris 07.09.2009

                    Also meines Erachtens sollte man eine Tabelle, sprich: das table-tag nur dann verwenden wenn man tatsächlich auch semantisch eine Tabelle darstellen möchte. Ist dies nicht der Fall kann man auf jeden Fall in jedem modernen Browser mit float arbeiten. Hierbei ist darauf zu achten, daß die einzelnen (nebeneinanderstehenden Boxen) eine feste oder maximale Breitenangabe haben die in Summe kleiner oder gleich der darüberliegenden Box ist. Wird die Summe größer, landet das zuletzt eingefügte DIV in der nächsten Zeile. Ich meine als sowas wie:
<div>text text text text</div>
<div style="width:150px">
<div style="float:left;width:50px">...</div>
<div style="float:left;width:50px">...</div>
<div style="float:left;width:50px">...</div>
</div>
<div style="clear:left">text text text text</div>
                    
                

08.09.2009

Ralf D.

89 ● 2

In deinem Falle ist wohl eine Liste im Bezug auf die Semantik garnicht so unangebracht, dafür gibt es auch mehrere einfache Umsetzungsmöglichkeiten:

#bsp1 ul {
  list-style: none;
}
#bsp1 li {
  float: left;
  width: 100px;
}
#bsp1 p {
  clear: left;
}
#bsp2 ul {
  list-style: none;
}
#bsp2 li {
  display: inline-block;
  width: 100px;
}

<div id="bsp1">
  <p>Ich bin Text</p>
  <ul>
    <li>Spalte 1</li>
    <li>Spalte 2</li>
    <li>Spalte 3</li>
  </ul>
  <p>Ich bin Text</p>
</div>
<div id="bsp2">
  <p>Ich bin Text</p>
  <ul>
    <li>Spalte 1</li>
    <li>Spalte 2</li>
    <li>Spalte 3</li>
  </ul>
  <p>Ich bin Text</p>
</div>

Im Verbindung mit dem Link von kris könntest du zudem auch sauber clearen, ohne zwingend ein "nachfolgendes Element" haben zu müssen. So sehen die beiden Codebeispiele im Browser (Firefox) aus:

08.09.2009

Blauesocke

637 ● 2 ● 8

Stelle deine Html-Frage jetzt!

Kontakt, Impressum, Lizenz, AGB