Header con 2 aree

[Alhazred]

Ho un problema con un header che non riesco a risolvere... di certo è colpa mia che con i layout tableless sono ancora alle prime armi.
Dovrei mettere nell'header 2 immagini diverse affiancate, una è una gif animata, l'altra è un'immagine statica. Per ora ho risolto attaccando le due immagini e facendo venir fuori un'immagine in un unico file, ma è venuta da quasi 1,5MB quindi non va bene, la gif animata da sola è 62KB e l'altra 13KB, per questo credo sia meglio lasciarle separate.
Come faccio a creare un header con 2 aree adiacenti? Una composta sulla sinistra dal solo sfondo e allineata a destra la gif animata, l'altra con l'immagine statica, il tutto in modo che venga come l'immagine qui sotto (ho evidenziato in rosso le varie aree, la prima è lo sfondo, la seconda è la gif animata e l'ultima è l'immagine statica, le prime 2 in realtà andrebbero in un unica area)
http://img242.imageshack.us/img242/1345/bannerjz2.th.jpg (http://img242.imageshack.us/my.php?image=bannerjz2.jpg)

Questo è il codice attuale dell'header

<div id="header">
<div style="width:937px; float: right; margin: 20px 20px 0 0;">
<div id="newsflash">
<jdoc:include type="modules" name="top" style="rounded" />
</div>
</div>
</div>

Questo è il codice css

#header {
height: 91px;
background: #d0d0e0 url(../images/banner.gif) top right no-repeat;
margin: 10px auto;
width: 937px;
padding: 0;
}

le dimensioni delle 2 immagini sono:
- gif animata 286x91
- immagine statica 252x91

Potreste aiutarmi?

[Mass8]

ho una piccola riminiscenza: ma i frame non si usano +?

[Alhazred]

Boh, vedo la gente storcere il naso quando si parla di layout con i frame.

Alternativa: posso mettere tutte e 2 le immagini all'interno del div header esistente in modo che si affianchino una all'altra allineate a destra, senza che si sovrappongano? Come?

[Mass8]

hai provato con un editor a vedere lui come lo fa?

[Alhazred]

Ci siamo quasi, ora si tratta di allineare i div, il risultato che ho ora è questo
http://img114.imageshack.us/img114/2306/banner1hh8.th.jpg (http://img114.imageshack.us/my.php?image=banner1hh8.jpg)

i codici sono questi

<div id="header">
<div style="width:937px; float: right; margin: 20px 20px 0 0;"> <!-- questo è il div evidenziato -->
<div id="header_img1" ></div>
<div id="header_img2" ></div>
</div>
</div>


#header {
height: 91px;
background-color: #d0d0e0;
margin: 10px auto;
width: 937px;
padding: 0;
border: none;
border-width : 0px;
}

#header_img1 { /*è l'immagine da affiancare sulla sinistra di quella qui sotto */
background-image: url('../images/h_img.gif');
background-repeat: no-repeat;
float : right;
border: none;
border-width : 0px;
margin-top: 0;
width : 252px;
height : 91px;
}

#header_img2 { /*è l'immagine che va ll'estremità destra */
background-image : url('../images/h_banner.gif');
background-repeat: no-repeat;
margin-right: 0;
margin-top: 0;
float:right;
border: none;
border-width : 0px;
width : 268px;
height : 91px;
}


Come allineo i div?

[Alhazred]

Ho risolto togliendo il div
<div style="width:937px; float: right; margin: 20px 20px 0 0;">