allineamento verticale immagine e due righe di testo (centrale)

[webmasterone]

Come da oggetto
mi sto sforzando di applicare i CSS e ottenere quello che cerco in questo modo e non con le tabelle

perdonate se la domanda può sembrare sciocca o banale, ma sto cominciando ora con i CSS e alle volte sapere le regole non è sufficiente. E' sempre utile qualcuno che ti suggerisca quando è meglio usarne una piuttosto che un altra.

veniamo al codice

l'html è semplicemente :

<div id="container">
        <div id="header">
                <img  src="images/Om_Tools_Blu_small.png" />
                <p>
                    <h1>OM-TOOLS</h1><br/>
                    <h2>Utilità per OM e aspiranti OM ~ HAM and Future HAM Tools</h2>
                </p>
        </div>


............. etc etc etc ................

e questo il CSS che hop usato (come vedete, ho sia settato margin e padding a 0 per tutti gli elementi, per gestirli singolarmente e usato il trick per considerare padding, margin e border nel width degli elementi.

/* per comprendere margini bordo e padding nel width*/ 
* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}


/* tolgo i margini e il padding a tutto, in modo da settarli poi individualmente */
*{margin: 0; padding: 0;}


html,body{background-color: #336699;}


body{ font-family: "Verdana, Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 76%; text-align: center }


/* setto la larghezza del container e lo stile */
div#container{
    width: 80em;
    margin: 0 auto;
    text-align: left;
    border-left: 2px solid #36c;
    border-right: 2px solid #36c;    
}


div#header{
    background-color: #FFFFFF;
    color: #336699;
    padding:1em;position:relative
}




div#header p{display:inline;vertical-align: middle; margin-left:1em;}
div#header h1{font-family: Century Gothic, sans-serif;display:inline;vertical-align: middle; margin-left:1em;position:absolute;left:10em;top:1.7em}
div#header h2{font-family: Century Gothic, sans-serif;display:inline;vertical-align: middle; margin-left:3em;position:absolute;left:11.7em;top:4.5em}
div#header img{display:inline;vertical-align: middle;}

vorrei che il risultato fosse l'immagine a sinistra, e i due blocchi di testo alla sua destra, centrati verticalmente.

l'unico modo che sono riuscito a trovare è di impostare pa position dell' header relativa, in modo da posizionare poi assolutamente i due blocchi di testo.

si, ho ottenuto quello che volgio, ma secondo me non è la strada giusta

deve esserci un modo più semplice

qualcuno mi suggerisce (e spiega perchè) il come ?

grazie


P.s.
qui anteprima del template (in oggetto) che sto costruendo:

http://www.om-tools.it/V_01/index.php