3 elemente horizontal

[homplom]

ich würde gerne im maincontent meiner page drei elemente horizontal nebeneinander anordnen, und zwar:
div, h1, div

ich hab allerdings probleme es korrekt im firefox angezeigt zu bekommen.

wenn ich versuche allen drei elementen float: left zuzuweisen verschwinden elemente komplett, alle auf inline zu stellen bringt auch nicht den gewünschten erfolg.

was mich besher am nähesten gebracht hat war eine kombination aus float, inline und inline block, allerdings wird es nur im explorer wie gewünscht angezeigt, firefox verschiebt das erste div etwa um ein pixel nach oben.

explorer:
http://www.funpic.de/foto/487773

firefox:
http://www.funpic.de/foto/487772

<div id="PreHeadline"></div>  
  <h1>Home</h1>  
  <div id="AfterHeadline"></div>

    #PreHeadline {  
       background-color: #B4B4B4;  
       height: 21px;  
       width: 100px;  
       margin-top: 7px;  
       float: left;  
    }  
  
    h1 {  
       font-size: 28px;  
       color: #B4B4B4;  
       width: 100%;  
       margin-top: 0px;  
       display: inline;  
    }  
  
    #AfterHeadline {  
       background-color: #B4B4B4;  
       height: 21px;  
       width: 100px;  
       margin-top: 7px;  
       display: inline-block;  
    }

die div elemente mit ner border vorzutäuschen gelingt nicht da der rahmen wesentlich größer ausfällt als die schrift selbst.

die h1 in ein div einzunesten, den hintergrund grau zu setzen und den hintergrund der h1 weiß zu setzen bringt auch nicht den gewünschten erfolg und bilder wollte ich eigentlich nicht für jede überschrift der seite basteln müssen.

wenn jemand eine lösung parat hat, oder zumindest nen workaround, währ ich sehr dankbar!