Hallo,
arbeite an einem eigenen WordPress-Theme und plage mich seit ein paar Stunden mit einem Problem...:
Undzwar habe ich einen div-container, indem sich 2 weitere divs befinden.
Das untere div ist in seiner Größe variabel, da es ein Text-Widget beinhaltet.
Das div darüber soll immer den Rest des Containers füllen, mit einem Abstand von 20px dazwischen.
Aber das mag nicht so ganz funktionieren..
Habe es mit display: table-row versucht.
Aber dann war kein Margin mehr möglich, sowie das Abrunden der Ecken.
Dann habe ich in einer neuen HTML-Datei versucht, dass irgendwie so mit dem Nötigsten hinzubekommen. Auch das klappte nicht.
Kann mir da vielleicht jemand helfen?
HTML
<html> <head> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <!-- Das ist der Container --> <div id="top">
<p>Dieses div soll seine Höhe automatisch anpassen</p> </div> <p>Von diesem verändert sich die Höhe stetig</p> </div> </div> </body></html>
Code
#container{
width: 300px;
height: 300px;
background-color: #444;
display: block;
position: relative;
top: 0px;
}
#top
{
width: 98%;
height: auto;
display: block;
position: relative;
background-color: aqua;
}
#bottom
{
margin-top: 20px;
width: 95%;
height: auto;
display: block;
position: relative;
background-color: blueviolet;
}
Alles anzeigen