javascript - Vertically align sans-serif font precisely using jquery/css -

i'm trying align sans-serif headline precisely menu elements in other div-elements, this:

header
b c

where aligned left end of header , c right end. use float distribute -elements , compute font-size fit header div width. problem use sans-serif font. problem demonstrated in fiddle

http://jsfiddle.net/ksutq/2/

<div id="hideheader" class="header" style="position: absolute;font-size:40pt;padding:0px;visibility: hidden;width:auto;height:auto;">header</div> <div id="header" class="header">header</div> <div id="menubar" class="menubar">     <div class="menubutton_left"><a href="#" id="workbutton">a</a>     </div>     <div class="menubutton_middle"><a href="#" id="aboutbutton">b</a>     </div>     <div class="menubutton_right"><a href="#" id="contactbutton">c</a>     </div>  <span class="stretch"></span>  </div> 

jscript

resizehead("#hideheader", "#header");  function resizehead(p1, p2) {     var fontsize = parsefloat($(p1).css("font-size"));     var spacing = parsefloat($(p1).css("letter-spacing"));     var initwidth = $(p1).width();     initwidth = initwidth - spacing;     var outwidth = $(p2).width();      var s = outwidth / initwidth;     s = fontsize * s;     $(p2).css({         "font-size": s     }); } 

css

div.header {     font-family:sans-serif;     text-align:justify;     white-space: nowrap; } div.menubar {     text-align: justify;     -ms-text-justify: distribute-all-lines;     text-justify: distribute-all-lines;     margin-bottom: 0px;     position: relative; } div.menubutton_left, div.menubutton_middle, div.menubutton_right {     vertical-align: top;     display: inline-block;     *display: inline;     zoom: 1;     width:60px; } div.menubutton_left { } div.menubutton_middle {     text-align: center; } div.menubutton_right {     text-align: right; } .stretch {     border: 2px dashed #444;     width: 100%;     display: inline-block;     font-size: 0;     line-height: 0 } 

how align beginning of h of header sans-serif font?

you can add margin-left:12px left menubutton div.

see demo