Posizionare DIV uno sotto l'altro

[maxtn]

Ciao, qualcuno ha un esempio?
Vorrei mettere dei div uno sotto l'altro ma dare la posizione solo al primo, gli altri dovrebbero posizionarsi sotto al precedente indipendentemente dalla quantità di testo contenuto nei div.


Grazieee

[Jerry Masslo]

se non ho capito male, normalmente è proprio così, al primo div dai un margin dal top e tutti gli altri gli si accoderanno con l'ordine che avranno nell'html. Ho capito male?

[maxtn]

Al primo div do la posizione con "position:relative", all'interno posiziono gli elementi con "position:absolute", al div successivo come dico di posizionarsi sotto al precedente?

[Jerry Masslo]

il position absolute non va bene per quanto hai detto, ogni absolute è indipendente dagli altri absolute, perché ti serve l'absolute?

[maxtn]

Vorrei fare una cosa del genere.



<div class="divgrup" style="position:relative; left:30px; top:40px; height:120px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:2"> DATI ORDINE RIPARAZIONE </div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:2">Numero</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:2">$ordnum</div>

<div class="txtpri" style="position:absolute; left:30px; top:60px; z-index:2">Cliente</div>
<div class="txt" style="position:absolute; left:140px; top:60px; z-index:2">$descli</div>

</div>




<div class="divgrup" style="position:relative; left:30px; top:80px; height:150px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:2"> DATI PRODOTTO </div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:2">Codice</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:2">$_POST[codpro]</div>

<div class="txtpri" style="position:absolute; left:320px; top:30px; z-index:2">Descriz.</div>
<div class="txt" style="position:absolute; left:410px; top:30px; z-index:2">$_POST[despro]</div>

<div class="txtpri" style="position:absolute; left:30px; top:60px; z-index:2">Matricola</div>
<div class="txt" style="position:absolute; left:140px; top:60px; z-index:2">$_POST[matricola]</div>

<div class="txtpri" style="position:absolute; left:320px; top:60px; z-index:2">Data ripar.</div>
<div class="txt" style="position:absolute; left:410px; top:60px; z-index:2">$dataripar</div>

<div class="txtpri" style="position:absolute; left:530px; top:60px; z-index:2">Riparatore</div>
<div class="txt" style="position:absolute; left:630px; top:60px; z-index:2">$riparatore</div>

<div class="txtpri" style="position:absolute; left:30px; top:90px; z-index:2">Descr. rip.</div>
<div class="txt" style="position:absolute; left:140px; top:90px; z-index:2">
<textarea name="desrip" cols="55" rows="2" readonly class="maiuscolo">$desrip</textarea>
</div>

[Jerry Masslo]

e per quella cosa a che ti serve l'absolute? Neanche il relative ti serve? Fai un div contenitore che metti dove vuoi e gli altri glieli annidi dentro e verranno in succesione.

[maxtn]

Ho provato così ma i due div sono seguenti mentre i contenuti si sovrappongono!


<div style="position:relative; left:30px; top:100px;">


<div class="divgrup" style="height:120px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:1">DATI ORDINE RIPARAZIONE</div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:1">Numero</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:1">$ordnum</div>

<div class="txtpri" style="position:absolute; left:30px; top:60px; z-index:1">Cliente</div>
<div class="txt" style="position:absolute; left:140px; top:60px; z-index:1">$descli</div>

</div>



<div class="divgrup" style="height:150px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:1">DATI PRODOTTO</div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:1">Codice</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:1">$_POST[codpro]</div>

<div class="txtpri" style="position:absolute; left:320px; top:30px; z-index:1">Descriz.</div>
<div class="txt" style="position:absolute; left:410px; top:30px; z-index:1">$_POST[despro]</div>

</div>


</div>

[maxtn]

Così funziona, però come faccio ad avere l'altezza automatica dei due div in base al contenuto?
Hoprovato con height:auto; ma non va!


<div style="position:relative; left:30px; top:100px">


<div class="divgrup" style="position:relative; height:120px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:1">DATI ORDINE RIPARAZIONE</div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:1">Numero</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:1">$ordnum</div>

<div class="txtpri" style="position:absolute; left:30px; top:60px; z-index:1">Cliente</div>
<div class="txt" style="position:absolute; left:140px; top:60px; z-index:1">$descli</div>

</div>



<div class="divgrup" style="position:relative; height:150px; width:700px; z-index:1">

<div class="titgrp" style="position:absolute; left:40px; top:-10px; z-index:1">DATI PRODOTTO</div>

<div class="txtpri" style="position:absolute; left:30px; top:30px; z-index:1">Codice</div>
<div class="txt" style="position:absolute; left:140px; top:30px; z-index:1">$_POST[codpro]</div>

<div class="txtpri" style="position:absolute; left:320px; top:30px; z-index:1">Descriz.</div>
<div class="txt" style="position:absolute; left:410px; top:30px; z-index:1">$_POST[despro]</div>

</div>


</div>

[Jerry Masslo]

guarda gli absolute quando li uso li uso separatamente l'uno dall'altro, metterli d'accordo è un'impresa (per non dire impossibile) per quello che devi fare sono indispensabili?

[maxtn]

Originariamente inviato da Jerry Masslo
guarda gli absolute quando li uso li uso separatamente l'uno dall'altro, metterli d'accordo è un'impresa (per non dire impossibile) per quello che devi fare sono indispensabili?

Dipende, se c'è un altro modo per inserire i testi nel div.