Wie kannst du einen DIV in HTML nebeneinander anordnen. Dafür hast du mehrere Möglichkeiten.

  1. Reines CSS
  2. Bootstrap CSS

CSS: DIV Nebeneinander

Schauen wir uns zuerst das Reine CSS an. Zuerst definieren wir uns zwei Container DIV1 und DIV2

HTML
<div class="div1">DIV1</div>
<div class="div2">DIV2</div>

Ergebnis

DIV1
DIV2

CSS
Der CSS Code dafür schaut so aus. Diesen kannst du in deine style.css Datei einfügen

CSS
.div1 {

    float: left;
    width: 50%;
    display: block;
    text-align: center;
    border: 1px solid black;

}

.div2 {

    display: block;
    text-align: center;
    border: 1px solid black;

}

DIV Container nebeneinander mit Bootstrap.css

Eine wesentlich einfachere Möglichkeit deine DIV Container nebeneinander anzuordnen ist mit Bootstrap.Um Bootstrap zu nutzen musst du die folgenden Dateien in deinen Header einbinden:

HTML
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap hat bereits die komplette CSS Struktur dabei und ist ein ausgezeichnetes Framework um DIVs auf deine Webseite zu positionieren.

Hier findest du dann die gängigsten Bootstrap Grid Container die du dann einfach nur in das HTML Dokument einfügen musst.

HTML Code

Ein Beispiel für eine Grid Darstellung mit zwei Containern sieht dann wie folgt aus.

HTML
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

Ergebnis

DIV1
DIV2

 

Über mich