[ERLEDIGT] Kompletter DIV-Container

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

fabian97

Neues Mitglied
29 November 2016
6
0
1
21
#1
Hallo,

Zur Veranschauung habe ich meine bisherigen Ergebnisse mal hochgeladen: http://acvm.bplaced.net/frage.php

HTML:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<title>YourTime-FM</title>
<style>
body
{
background:#eee;
font-family: 'Poppins', Arial;
}
#body
{
 z-index:1;
 position:absolute;
 top:90px;
 left:5%;
 right:5%;
 background:#FFF;
 color:#000;
 min-height:100px;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#links
{
 z-index:4;
 position:absolute;
 left:0%;
 right:25%;
 padding:5px;
 color:#000;
}
#rechts
{
 z-index:4;
 position:absolute;
 left:80%;
 right:0%;
 padding:5px;
 color:#000;
}
#title1
{
font-size:18px;
font-weight:bold;
}
#desc1
{
font-size:14px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>

<div id="body">

<div id="links">
<div id="title1">Titel 1</div>
<div id="desc1">Beschreibung 1</div>

</div>
<div id="rechts">
<div id="title1">Titel 1</div>
<div id="desc1">Beschreibung 1</div>
<div id="title1">Titel 1</div>
<div id="desc1">Beschreibung 1</div>
<div id="title1">Titel 1</div>
<div id="desc1">Beschreibung 1</div>
</div>
</div>
</body>
</html>
Ich möchte gerne meinen Content in einem großen Container anzeigen lassen, der in zwei Spalten aufgeteilt ist. Allerdings erkennt der große Container (in diesem Fall div id="body") nicht automatisch, wie hoch der Inhalt ist.

Nun meine Frage: Was mache ich falsch? :(

Danke für eure Hilfe :)

Beste Grüße,
Fabian
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.464
215
63
#2
Hallo

Du verwendest position: absolute ohne dich mit den HTML-/CSS-Grundlagen vertraut gemacht zu haben.

Mit position: absolute werden die damit belegten Container aus dem Dokumentenfluß genommen. Damit können die Container nicht mehr gegenseitig aufeinander reagieren. Eine Folge ist dass umgebende Container nicht wissen wie groß die inneren Container sind.

position-Angaben werden nur noch für wenige Layoutwünsche benötigt.

Ähnliches gilt für Float.

Zum Grundlayout solltest du aktuell Flexbox (display: flex) verwenden.

Gruss

MrMurphy