Divs che si spostano in relazione ad altro div

[france1979]

Ciao a tutti, vorrei integrare dentro ad un cms l'uso dei div.

Faccio un esempio, ci sono 4 divs distribuiti su due colonne, dentro ogni div, c'è un contenuto dinamico, quindi non posso definire a priori l'altezza, come posso fare in modo che il secondo div non sia sovrapposto al primo di sopra nel caso in cui quello abbia un contenuto che ne aumenta l'altezza?

Grazie in anticipo
Francesco

[gengix]

Se ho capito bene quello che intendi, non dovresti avere problemi.
Non specificando l'altezza dei div, quelli sopra aumentando dovrebbero spostare quelli sotto proporzionalmente.
Fai attenzione però ad utilizzare bene i fluttuamenti, in caso contrario potresti avere dei comportamenti anomali.

[france1979]

Intanto, grazie per la risposta, ho constatato ciò che tu dici, però ho un problema.... finchè devo affiancarle verticalmente i div va bene, ma aggiungendone un terzo che è teoricamente nella seconda colonna, mi va giù , ecco il codice:

<style type="text/css">
<!--
#apDiv1 {
    position:relative;
    width:239px;
    z-index:1;
    left: 255px;
    top: 100px;
    background-color: #00CC33;
}
#apDiv2 {
    position:relative;
    width:200px;
    z-index:1;
    left: 255px;
    top: 105px;
    background-color: #333300;
}
#apDiv3 {
    position:relative;
    width:200px;
    z-index:1;
    left: 660px;
    top: 105px;
    background-color: #333300;
}
-->
</style>
<div id="apDiv1">fdgghfghfh sdalkfj kldsjf lkòdsj flkdsòfjlkòsd jlkòsdjfdklsòjfsdklòa fjlkdsòjf
dsf ksdlòf ksdòf ksdfklòsdf
jlksdòf ksdòl fksdòfk sdfk sda 
klòsd fksd kslòdafklsadfklò
sdaf ksdlòf klòsadkf àdk lò
sdasd
sadsad
sad
asd
asd
asdsa
das
dsa
das
das
d
asd
asd
asd
asd
as
sdklò fsdaklò fsdkfsd ks
ciao
ciao
ciao
ciao
ciao
ciao
ciao

</div>
<div id="apDiv2"></div>
<div id="apDiv3">io non centro niente con gli altri due</div> 

Grazie per l'aiuto

[gengix]

Attenzione stai usando i posizionamenti.
Quando utilizzi i posizionamenti gli elementi si estraggono dal flusso normale del documento e non si comportano come di consueto.

In più vedo che utilizzi il position relative, in genere quest'ultima proprietà dovrebbe essere attribuita all'elemento contenitore, mentre ai figli dovrebbe essere data la proprietà absolute, per indirizzarli dove vuoi te.

Nel tuo caso mancando un div contenitore la "relative " dovrebbe assere attribuita all'elemento body e ai tuoi div la "absolute".

Ti consiglio di non utilizzare questa soluzione, ma di creare un div contenitore e di utilizzare la proprietà float per i div figli, è molto più gestibile.

[france1979]

Dunque, ho sempre lavorato con le tabelle... quindi diciamo che sono agli inizi con div... di seguito il codice che ho utilizzato per ottenere quello che voglio, c'è un modo per farlo senza intervenire con programmazione?

<style type="text/css">
<!--
body,html { height:100%;margin:0 }
#apDiv1 {
    position:absolute;
    width:239px;
    z-index:1;
    left: 98px;
    top: 48px;
    background-color: #00CC33;
}
#apDiv2 {
    position:absolute;
    width:200px;
    z-index:2;
    left: 318px;
    top: 128px;
    background-color: #333300;
}
#apDiv3 {
    position:absolute;
    width:200px;
    z-index:3;
    left: 353px;
    top: 45px;
    background-color: #333300;
}

#contenitore {
width:780px;
top: 0px;
position:relative;left:50%;
margin:-0px 0 0 -390px;
background-color:#CCCCCC;
}


-->
</style>
<div id="contenitore">
<div id="apDiv1">fdgghfghfh sdalkfj kldsjf lkòdsj flkdsòfjlkòsd jlkòsdjfdklsòjfsdklòa fjlkdsòjf
dsf ksdlòf ksdòf ksdfklòsdf
jlksdòf ksdòl fksdòfk sdfk sda 
klòsd fksd kslòdafklsadfklò
sdaf ksdlòf klòsadkf àdk lò
sdasd
sadsad
sad
asd
asd
asdsa
das
dsa
das
das
d
asd
asd
asd
asd
as
sdklò fsdaklò fsdkfsd ks
ciao
ciao
ciao
ciao
asdfgsdfg
sdf
sdfs
dfsda
f
sdaf
sadf
asdf
asdf
asd
fasd
fsad
fasd

ciao
ciao
ciao

<? //cho $contenuto; ?></div>
<div id="apDiv2"></div>
<div id="apDiv3">io non centro niente con gli altri due</div>
</div>
<script>
e_altezza=document.getElementById("apDiv1").offsetHeight;
e_sinistra=document.getElementById("apDiv1").offsetLeft;
e_alto=document.getElementById("apDiv1").offsetTop;
e_larghezza=document.getElementById("apDiv1").offsetWidth;

f_altezza=document.getElementById("apDiv2").offsetHeight;
f_sinistra=document.getElementById("apDiv2").offsetLeft;
f_alto=document.getElementById("apDiv2").offsetTop;
f_larghezza=document.getElementById("apDiv2").offsetWidth;

//facciamo questo test, se il box non è in linea in altezza allora non riposizionarlo
if ((f_alto > e_alto) && ((f_sinistra > e_sinistra) && (f_sinistra < (e_larghezza+e_sinistra))))
{
document.getElementById("apDiv2").style.top = (e_altezza+e_alto)+'px';
}

</script>

grazie
francesco

[gengix]

Prova guardarti questa sezione del sito:

http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

ti spiega anche il passaggio dal layout a tabelle al layout table-less.

In particolare nel tuo caso:

http://css.html.it/guide/lezione/68/...-con-il-float/