Ho un problema con l'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, e 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)


Questo è il codice attuale dell'header
codice:
<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
codice:
#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?