Sto cercando di creare un div che assomigli sommariamente ad una finestra di Windows.

codice:
<div id="layer<%=Indice%>1" class="layer">
  <span class="titleBox">Documenti:</span>
  [img]<%=dirImg&[/img]" alt="Chiudi" title="Chiudi" onclick="document.getElementById('layer<%=indice%>1').style.display='none';" />
  

</p>
  -----
  Stampa dinamica dei contenuti
  -----
</div>
Vorrei che lo span prenda tutta la larghezza possibile e che l'immagine di chiusura stia in alto a destra (distanziamento top:1px, right:1px).

Purtroppo, come al solito, qualche problema ci deve sempre essere

- Anche con Width:100% lo span si ostina a prendere solo lo spazio occupato dal suo contenuto.
- L'immagine (alta 12px), se inserita nello span è troppo alta rispetto al testo e mi fa staccare lo span dal bordo superiore del div principale. Mentre se la metto position:relative con top:1px e right:1px non si posiziona lì ma mi va solo un pò più a destra (ma ben distaccato dal bordo destro del div!)

Ecco un'immagine con l'immagine fuori dallo span, posizionata relativamente:


Qua un pò di codice CSS :
codice:
 .layer {
		padding-top:0;
		margin: 0;
		
		top: -20px;
		POSITION:relative; 
		float:right; 
		display:none;
				
		border: 1px solid #76676A;
		border-top-color: #C7D7E4;
		border-bottom-color: #615C59;
		border-left-color: #99B0C2;
		
		right:0; 
		background: #D6D3CE;}
 
 .layer span {top:0px; background: #516DAE; border: 1px solid red; height: 14px; font-weight:bold ; padding:0; margin: 0; color:white;}

 .layer .btnClose {position:relative; top:1px; right:1px; width:12px; height: 12px; margin:0; padding: 0;}
Mi sapete dare una mano? Mi potete anche stravolgere il Css.... basta che sia posizionato correttamente!

Questo vorrei che fosse, più o meno, il risultato finale:


Vi ringrazio molto