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 :
1
2
3
4
5
6
7
8
9

<div id="parentBox">
     <h2>parentBox</h2>
 
     <!-- Hier folgt der weitere Inhalt der #parentBox -->
 
     <div id="childBox">
          <p>childBox</p>
     </div>
</div>
[CSS] Wie richte ich eine Box am unteren Rand der Elternbox aus?-nested_box_at_bottom.jpg

Lösung:

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

Stylesheet:

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div#parentBox {
[b]position:relative;[/b]
min-height:300px;
height:auto !important;
height:300px;
width:550px;
padding:10px;
border:1px solid #000;
}
 
div#childBox {
[b]position:absolute;
left:0;
bottom:0;[/b]
height:50px;
width:550px;
padding:10px;
background:#ccc;
}


mfg Maik