html - align nav to bottom of header -

my header holds logo image nav element. nav sit @ bottom of header, without using absolute positioning or specific top/left pixels because responsive.

here code far

http://jsfiddle.net/aiedail/86zgd/

i had tried adding

 nav{margin-top: 50%;}  

but used full page height rather containing div height.

any suggestions or appreciated.

i think best way solve this, set parent container to

position: relative; 

and in nav, use

position: absolute; bottom: 0; right: 0; 

this way, nav in rightbottom corner of header, header still relative, don't lose responsiveness.

jsfiddle here