Quelltext der Seite Zwei Blöcke nebeneinander CSS

{{Programmierung
|name = Zwei Blöcke nebeneinander CSS
|bild = Css.png
|portal = [[Portal:CSS|CSS-Portal]] • [[Portal:Webentwickler|Portal für Webentwickler]]
}}
Bei der Entwicklung von Webseiten tritt häufig die Aufgabe auf, mehrere Spalten mit unterschiedlichem Inhalt nebeneinander anzuordnen. Standardmäßig werden jedoch <code><nowiki><div></nowiki></code>-Elemente nacheinander untereinander angeordnet.

Fragen zu diesem Artikel oder andere Themen können auf der [[Diskussion:Zwei Blöcke nebeneinander CSS|Diskussionsseite]] gestellt werden.

=== Erstellung von Blöcken in HTML ===
Zunächst müssen wir zwei <code><nowiki><div></nowiki></code>-Blöcke in unserem HTML erstellen:
<syntaxhighlight lang="html">
<div class="container">
  <div id="block1">Text</div>
  <div id="block2">Text</div>
</div>
</syntaxhighlight>

=== Anordnung von DIV-Blöcken nebeneinander ===
Um die Blöcke nebeneinander in einer Zeile zu platzieren, müssen wir in CSS für beide Elemente die folgenden Parameter definieren:
<syntaxhighlight lang="css">
#block1 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}

#block2 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}
</syntaxhighlight>
Das Ergebnis wird wie auf dem rechts gezeigten Bild dargestellt.

* <code>float</code>: Dieser Wert kann "''left''" oder "''right''" sein, was bedeutet, dass der Block an die entsprechende Seite ausgerichtet wird. Zum Beispiel kann der erste Block links und der zweite rechts positioniert werden, wodurch eine ordentliche Anordnung entsteht. Ein Beispiel finden Sie am Ende des Artikels im erstellten Template.
* <code>display: block;</code>: Zeigt das <code>div</code>-Element als Blockelement an.

=== Zusätzliche Einstellungen ===
Die übrigen Parameter sind dekorativer Natur:
* <code>width</code>: Definiert die Breite der Blöcke.
* <code>border</code>: Legt die Rahmen der Blöcke fest.
* <code>margin</code>: Externe Abstände, um die Blöcke voneinander zu trennen.

== Zusätzliche Optionen für die Lösung ==
* '''Flexbox''': Anstelle von float kann Flexbox verwendet werden, was die Verteilung der Elemente flexibler macht:
<syntaxhighlight lang="css">
.container {
  display: flex;
}

#block1, #block2 {
  flex: 1;
  margin: 2px;
  border: 1px solid gray;
  padding: 10px;
  background: lightgray;
}
</syntaxhighlight>

* '''Grid:''' Für komplexere Layouts kann CSS Grid verwendet werden:
<syntaxhighlight lang="css">
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4px;
}

#block1, #block2 {
  border: 1px solid blue;
}
</syntaxhighlight>
Diese Methoden bieten modernere und flexiblere Ansätze für Layouts im Vergleich zur Verwendung von float. Das Aktualisieren Ihres Artikels mit diesen Informationen kann für Leser hilfreich sein, die nach modernen Layoutmethoden suchen.

Falls es Schwierigkeiten bei der CSS-Umsetzung gibt oder Fragen zu diesem Artikel bestehen, können diese auf der speziell dafür eingerichteten [[Diskussion:Zwei Blöcke nebeneinander CSS|Diskussionsseite]] gestellt werden.

== Weitere Artikel zu CSS ==
{{Enzyklopädie CSS/Navigation}}
{{Vorlage:Navigationsleiste/CSS}}
[[wj-ru:Два блока рядом друг с другом CSS]]