Non so se è la sezione appropriata ,visto che per la soluzione forse dovrò ricorrere a javascript, ma volevo sapere anche dal punto di vista dei css se ho scelto l'approccio migliore.
Ho la necessita di disporre ,all'interno di un div, tre differenti liste e vorrei, a seconda degli elementi che compongono ciascuna di queste liste, dei margini diversi:infatti il div contenitore ha come sfondo l'immagine di un campo da calcio e ,ciascuna lista, è formata dall'elenco dei giocatori divisi per ruolo.A seconda del numero di voci di ciascuna lista, vorrei che gli elementi si disponessero in modo ordinato

Codice PHP:
<div id="campo">
<div id="por">por</div>
<div id="dif"><ul>[*]dif[*]dif[*]dif[*]dif[/list]</div>
<div id="cen"><ul>[*]cen[*]cen[*]cen[*]cen[*]cen[/list]</div>
<div id="att"><ul>[*]att[*]att[*]att[/list]</div>
</div> 
Codice PHP:
div#campo{width:431px;height:350px;border:2px solid;border-color:#ff9900;background:url(../campo.gif);background-repeat: no-repeat;font-family :Arial;font-size: 11px;}
div#por{margin:130px auto auto auto;width:50px;height:60px;border:5px solid;float:left;text-align:center;}
div#dif{margin:10px auto auto 20px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#cen{margin:10px auto auto 40px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#att{margin:10px auto auto 70px;width:70px;height:240px;border:5px solid;float:left;text-align:center;}
div#dif ul{list-style-type: none;  }
div#dif li{ border:1px solid;}
div#cen ul{list-style-type: none;  }
div#cen li{ border:1px solid;}
div#att ul{list-style-type: none;  }
div#att li{ border:1px solid;}