Dialog ui incrémenter width pour chaque occurence

Salut,
Après avoir cherché des heures, je vous pose cette question : Comment incrémenter la largeur d’une occurrence Dialog UI à une autre afin qu'elles se positionnent les unes à côté des autres ?

Je génère dynamiquement (sous SPIP) mes liens sur les dialogs :

<div id="generalites">
<ul>
<BOUCLE_generalites(RUBRIQUES) {titre_mot="generalites"}>
<BOUCLE_generalites_affichage(ARTICLES) {id_rubrique}>
<li>#TITRE<a class="opener" data-dialog-opener="dialog#ID_ARTICLE" href="#" [ title="(#TEXTE|couper{320}|textebrut|entites_html)"]>#LOGO_ARTICLE</a></li>
</BOUCLE_generalites_affichage>
</BOUCLE_generalites>
</ul>
</div>

Je génère dynamiquement (sous SPIP) mes dialogs :

<BOUCLE_ref-dialog(RUBRIQUES){titre_mot="generalites"}>
<BOUCLE_generalites_texte(ARTICLES) {id_rubrique}>
<div id="dialog#ID_ARTICLE" class="dialog">
#TEXTE
</div>
</BOUCLE_generalites_texte>
</BOUCLE_ref-dialog>

J'ai le JS :

$(".dialog").dialog({
autoOpen: false,
show: 'blind',
hide: 'blind',
width:250,
height:300
});

$(".opener").click(function() {
$('#' + $(this).data("dialogOpener")).dialog('open');

return false;
});
});

Mes dialogs fonctionnent bien mais s'affichent les unes au dessus des autres...
Comment dois-je faire ?
Merci beaucoup.