[CSS] Wie richte ich eine Box am unteren Rand der Elternbox aus?

Status
Nicht offen für weitere Antworten.
M

Maik

Wie richte ich eine Box am unteren Rand der Elternbox aus?

Die Ausgangssituation: In einer Box (hier mit einer Mindesthöhe von 300px) soll an ihrem unteren Elementrand eine Box positioniert werden, die an dieser Stelle als "Footer" fungiert und vom zunehmenden Inhalt in der Elternbox nach unten verrückt wird.

Markup:

Code:
<div id="parentBox">
     <h2>parentBox</h2>

     <!-- Hier folgt der weitere Inhalt der #parentBox -->

     <div id="childBox">
          <p>childBox</p>
     </div>
</div>
nested_box_at_bottom.jpg

Lösung:

Die Parent-Box wird relativ und die Child-Box in ihr absolut positioniert.

Stylesheet:

Code:
div#parentBox {
position:relative;
min-height:300px;
height:auto !important;
height:300px;
width:550px;
padding:10px;
border:1px solid #000;
}

div#childBox {
position:absolute;
left:0;
bottom:0;
height:50px;
width:550px;
padding:10px;
background:#ccc;
}


mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück