HTML: DIV nebeneinander anordnen – So gehts!

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

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

Ergebnis

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

.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:

<!-- 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.

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

Ergebnis

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite