Can't place my DIV 10px from bottom - html

Question

would you have any idea why my red div (.testbox) is not placed 10px from bottom as I would like it to be and despite the margin-bottom: 10px? See http://jsfiddle.net/Hs977/
Thanks for your help
body {
background-color: rgb(255, 255, 255);
font-family: Helvetica;
font-size: 16px;
font-weight: 400;
line-height: 1.38;
color: rgb(21, 84, 244);
margin: 0;
margin: 0;
padding: 0;
border: 0;
}
header {
width: 100%;
height: 600px;
min-height: 300px;
margin-right: auto;
margin-left: auto;
background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');
background-size: cover;
background-position: center center;
background-color: rgb(222, 222, 222);
}
h1 {
width: 100%;
margin-top: 39px;
margin-right: auto;
margin-left: auto;
font-size: 37px;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(0,0,0);
}
.blablatext {
margin-top: 16px;
margin-right: auto;
margin-left: auto;
font-weight: 400;
line-height: 1.38;
text-align: center;
color: rgb(21, 84, 244);
}
.testbox {
float: right;
width: 200px;
height: 90px;
background: red;
margin-right: 20px;
margin-bottom: 10px;
}

Answer 1

Does not work that way. To place the div at a specified distance from the bottom of it's container, you need to use position:absolute on the div and set position:relative on the container. Then use bottom:10px; to place it 10px from it's parents bottom.
Updated your fiddle: http://jsfiddle.net/Hs977/1/

Answer 2

from the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
In the absolute positioning model, a box is explicitly offset with
respect to its containing block. It is removed from the normal flow
entirely (it has no impact on later siblings). An absolutely
positioned box establishes a new containing block for normal flow
children and absolutely (but not fixed) positioned descendants.
However, the contents of an absolutely positioned element do not flow
around any other boxes. They may obscure the contents of another box
(or be obscured themselves), depending on the stack levels of the
overlapping boxes.
since your header have height defined:
height: 600px;
min-height: 300px;
you can specify absolute position, then set bottom position
.testbox {
float: right;
width: 200px;
height: 90px;
background: yellow;
margin-right: 20px;
position:absolute;
bottom:0;
}
http://jsfiddle.net/InferOn/Hs977/8/
I don't know why would you define float for .textbox