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

[ERLEDIGT] Kompletter DIV-Container

fabian97

Neues Mitglied
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
 
Werbung:
Hallo

Was mache ich falsch?

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
 
Werbung:
Zurück
Oben