I'm having troubles trying to vertical align a div with CSS - html

Question

Hello I'm trying to align the "container2" div to bottom of "cointainer" but I'm having troubles and I dont know where, any help?
HTML
<div id="container">
<div id="container2">
<p>Text</p>
</div>
</div>
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto; }
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto; }
http://jsfiddle.net/G4GT4/1/

Answer 1

With the current structure you would have to position the child with position:absolute.
JSfiddle Demo
CSS
#container{
/*Colors*/
background-color:rgb(129, 159, 255);
/*Size Box*/
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
position: relative;
}
#container2{
/*Colors*/
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
position: absolute;
bottom:0;
left:50%;
margin-left: -25%;
}

Answer 2

Add
#container { position: relative; }
#container2 { position: absolute; bottom: 0; }
Or simply use tables

Answer 3

Demo
#container {
background-color:rgb(129, 159, 255);
display: table-cell;
width:400px;
height:200px;
margin:0 auto;
overflow:auto;
text-align: center;
vertical-align: bottom;
}
#container2 {
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
display: inline-block;
}

Answer 4

You have to set margin-top (you know both heights) or using positioning, I´ve chosen second variant.
#container {postition: relative}
#container2 {position: absolute; bottom: 0; left: 25%;}
http://jsfiddle.net/G4GT4/2/

Answer 5

You can set position relative to container2
Working fiddle here
#container2{
/*Colors*/
position: relative;
top: 15%;
background-color:black;
color:white;
/*Size Box*/
width:50%;
height:50%;
padding:20px;
margin:0 auto;
overflow:auto;
}

Answer 6

If you don't want to use position absolute; you can do this:
fiddle
css
#container{
text-align:center;
}
#container:before {
content:"";
height:100%;
display:inline-block;
vertical-align:bottom;
}
#container2{
display:inline-block;
vertical-align:bottom;
}