posizionamento DIV

[George_star]

ciao a tutti.
Sto creando una parte gestionale per il mio sito ma mi trovo ingarbugliato fra i div e le loro posizioni.
in pratica tramite uno script ricorsivo stampo i primi 5 risultati di una ricerca. Ogni record risultante è impaginato dentro un div. La struttura che avevo in mente è questa che segue:

<div class="main">
    <div class="avatar">
    [img]img/avatar/avatar_3.png[/img]
    </div>

    <div class="detail">
    Testo di prova
    </div>
</div>

Quindi un DIV contenitore di classe main che contiene due div: uno a destra con l'avatar del utente a cui si riferisce il record e di fianco i dettagli del record. Questo div 'detail' ora contiene solo testo ma poi conterrà un piccolo form a scomparsa per modificarne il contenuto.

Segue codice CSS primo tentativo (allegato immagine risultato 1.png):

<style type="text/css">
.main {
	height: 40px;
	width: 580px;
}
.detail {
	position: relative;
	left: 60px;
	width: 520px;
}
.avatar {
	background-color: #000;
	height: 34px;
	width: 34px;
	margin: 0px;
	padding: 3px;
}
</style>

Se aggiungo alla classe .detail l'attributo top=-20px il div ovviamente sale ma lo spazio che c'è fra i div contenitore rimane sempre lo stesso...io invece li vorrei con un interspazio fisso di ad esempio 5px e poi tramite jQuery cliccando su 'testo di prova' far scivolare tutto più in basso facendo così comparire il form nascosto...

Spero di essermi spiegato dignitosamente...sicuramente è più facile farlo che dirlo....

Grazie!

[Mich_]

Non usare il position (e neppure il left, quindi), ed usa invece i float.

Sia .detail che .avatar devono avere
float: left;
e il blocco .main deve invece avere il clear alla fine (vedi ad esempio [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float)

Poi potrai spostare il blocco piu` a destra usando opportunamente i margini.


Nota semantica:
Se i tuoi .main sono una lista, dovresti usare i tag di lista (<ul> -[*], oppure <dl> - <dt> - <dd>)