HTML / CSS - Problema impaginazione e gestione del widget Accordion di jQuery UI

Ciao a tutti.
Poichè il mio problema riguarda un po' tutto tra javascript, css e html, scrivo in questa sezione sperando di non sbagliare.

Nel mio sito ho bisogno di creare una sorta di bacheca per le comunicazioni.
Ogni item della bacheca sarà composto da Titolo, mittente, data, testo del messaggio
Utilizzo un Accordio di jQuery UI per gestire ogni comunicazione, e ho fatto in modo che Titolo, mittente e data siano tutti visualizzati nell'header dell'accordion, mentre il testo farà parte del contenuto.

Nella pagina html ho prodotto questo risultato:

	<div id="group_com">
	<!-- INIZIO BACHECA -->
	
		<!--  INIZIO ACCORDION HEADER -->
		<div class="accordion-header">
			<h3 class="header-titolo" name="15" >
				<a name="15"></a>
				<span class="titolo-com">Testo di prova</span>
			</h3>
				<span class="data" title="Data pubblicazione messaggio">
					<strong>02-12-2012</strong>
				</span>
				<br />
				<span class="mittente" title="Autore del messaggio">
					<strong>Prova prova</strong>
				</span>
		</div>
		<!-- FINE ACCORDION HEADER -->
		
		<!-- INIZIO ACCORDION CONTENT -->
		<div class="accordion-content">
			<p>
			  	Testo del messaggio
			  	<br />
		<input title="Elimina questo messaggio" type="submit" value="" name="elimina_" class="elimina" />
      </p>
    </div>
    <!-- FINE ACCORDION CONTENT -->
    
    <!-- STESSA IDENTICA SINTASSI PER LE ALTRE COMUNICAZIONI -->
    
  <!-- Fine Bacheca -->
  </div>

ho utilizzato il seguente CSS per la gestione dei vari titolo, date, ecc....:

.data, .mittente {
	display: block;
	position: relative;
	float: right;
	top: -10px;
	color: grey;
	font-weight: bold;
	font-size: 12px;
}

.titolo-com {
	color: blue;
	font-weight: bold;
}

.header-titolo {
	display: block;
	width: 80%;
}
.accordion-content {
	display: block;	
}

I problemi che riscontro sono due:

1) Il titolo è al di sopra dell'icona quando dovrebbe essere centrato (Non molto importante)
2) Il riquadro del contenuto dell'accordion è tagliato a metà dell'intero div (lo potete vedere nell'immagine allegata)!! Molto Importante

In javascript per far partire l'accordion ho il seguente codice:

var icons = {
   header: "ui-icon-circle-arrow-e",
   activeHeader: "ui-icon-circle-arrow-s"
};
$('#group_com').accordion({
   header: "div.accordion-header",
   collapsible: true,
   icons: icons,
   active: index  // me lo sono calcolato altrove
});

Allego l'immagine del risultato finale.

Non riesco a capire da cosa dipenda quell'errore

Spero di essere stato chiaro e vi ringrazio anticipatamente.

Cosi ad occhio non è facile determinare da cosa dipenda l'errore. Impostare semplicemente la larghezza a 100%? Se no non avresti una pagina di esempio, ci semplifichi di molto il lavoro.