[css]:div

[Whitecrowsrain]

ho tre div così disposti:

(primo)(secondo)
(    terzo     )

e questo è il loro codice:

#primo{
 position :absolute;
 top : 150px;
 left: 12px;
 width:300px;
}
#secondo{
 position :absolute;
 top : 150px;
 right : 12px;
 text-align:right;
 width:300px;
}
#ter<o {
 margin : 1em;
 min-heigth:500px;
 font : normal 1em/1.4em Arial,sans-serif;
}

ora il mio problema è che il primo div non ha una altezza prefissata xò c'è una distanza prefissata del 3°div dal margine top (margin:1em).
Se riempio il primo div oltre la distanza del 3° dal margine alto, questo mi va ad invadere il 3°div(si sovrappone...)come posso evitare questo spiacevole inconveniente?

[Whitecrowsrain]

ma nessuno lo sa???
vabbhe che siamo pochi xò!!!

[Whitecrowsrain]

mi aiutateeeeeeeeeeeeeeeeeee????????????????



per favore!

[Mich_]

Un attimo di calma. Le persone "esperte" in questo forum di notte dormono ... scherzo, ma comunque sono persone piu` attive in orario lavorativo.

IL CSS va impostato im maniera diversa: dimentica le posizioni fisse, e passa invece ad usare il float:

#primo{
  float:left;
  width:300px;
}
#secondo{
  float:left;
  width:300px;
  text-align:right;
}
#terzo {
  clear:left;
  min-heigth:500px;
  font : normal 1em/1.4em Arial,sans-serif;
}

Per spaziare gli elementi tra loro puoi usare i margin; oppure puoi inserire tutti tre i blocchi dentro un blocco ulteriore, che sposti tramite i margin.

[Whitecrowsrain]

ok credo di aver capito...

ma se la situazione fosse un po' più complicata:

_____________________________
(        primo div          )
( (secondo div) (terzo div) )
_____________________________
(       quarto div          )

vorrei che il primo div si allargasse nel caso in cui il secondo div
fosse grande e che il quarto div andasse in basso..cioè non vorrei sovrapposizioni...
tanto per capirci la situazione è questa:

 
<div="primo div">
        <div="secondo div">
        </div>
        <div="terzo div">
        </div>
</div>
<div="quarto div">
</div>

come li potrei mettere?

[Mich_]

Non vedo il problema.
Nota pero` che gli id devono avere nomi validi (niente spazi e iniziare per lettera).

CSS:
.largo {
  width: 100%;
  clear: all;
}
.mezzo {
  width: 49%;
  float: left;
} 
...

HTML:
<div id="primo" class="largo">
  

qui puoi metterci qualcosa, se vuoi</p>
  <div id="secondo" class="mezzo">

contenuto due.... </p></div>
  <div id="terzo" class="mezzo">

contenuto tre.... </p></div>
</div>
<div id="quarto" class="largo">
  

contenuto quatro</p>
</div>

[Whitecrowsrain]

funziona alla grande...
grazie mille