jquery - header fixed but responsive to content -

sample problem : http://jsfiddle.net/yrbvw473/43/

i want margin content top balance. if in small width browser, header had 2 row line, if want content more distant top. , if 3 header have 3 row distant top , content more..

i had code css :

    @media (max-width: 990px) {     .heads_search{         top:40px;     }     #space_top{         height:50px;     } } @media (max-width: 767px) {     .heads_search{         top:60px;     }     #space_top{         height:160px;     } } @media (max-width: 390px) {     .heads_search{         top:100px;     }     #space_top{         height:200px;     } } 

but didn't 100% right, if have more idea?

add small script adjust margin-top attribute. try this.

$( window ).resize(function() {   $('#content').css('margin-top', 50 + $('#header').height()); });