affiancare div

[lucker]

l' unico modo per affiancare 2 div, dentro un div generale, è renderne uno float o absolute ?

altrimenti è automatico uno sotto l' altro ?

Mi spiego . Il mio layout è così

2 colonne : a destra più stretta con menu a sinstra più larga per i contenuti. I contenuti sono a loro volta divisi in due colonne. Il problema è dividere il contenuto in due colonne. Se annido due div questi vengono posizionati uno sotto l' altro.

N.B: quando parlo di colonne non intendo tabelle.

[ashtur1]

prova ad usare la proprietà float di css.....

se sei agli inizi con i css, ti consiglio di leggerti più tutorial possibili

alcuni siti li trovi nella sezione link utili del forum

[Mich_]

Per default gli elementi di tipo blocco (tipo <div>, <hN>, <ul>...) si posizionano uno sotto l'altro. Invece gli elementi di tipo inline (tipo <a>, <span>, <img>, ...) non interrompono il flusso.
Ai blocchi puoi definire margini e altre caratteristiche, che non puoi definire agli inline.

I blocchi puoi posizionarli con posizionamenti assoluti o seguendo il flusso normale.
Se preferisci non dare posizionamenti assoluti (cosa che io consiglio sempre), per affiancare dei blocchi devi usare il float.

[lucker]

ok, quindi per ottenere l' affiancamento la risposta è : float!
absolut è meglio evitare.

Thank, mi serviva questa conferma.

[lucker]

..... purtroppo questa soluzione non va bene, devo studiare un' altra sistemazione. Mi conviene fare 3 colonne.

[merlinox]

Spero di non dire una banalità, ma perchè per affiancare dei[*] basta tirare via lo stile lista e usare display:inline
mentre per i DIV siamo costretti ad usare un float?

Possibile che non ci sia una scappatoia?
Per assurdo DW mi affiancava questi 2 DIV:

<div id="sx" style="width:200px;position:relative;display:inlin e;border:1px solid red;" >
lkjklò jlkj
</div>
<div id="dx" style="width:200px;position:relative;display:inlin e;border:1px solid green;">
lkjklò jlkj
</div>

ma poi sia IE sia FIREFOX non hanno più voluto sapere, o meglio me li affiancano senza mantenere la larghezza di 200px.

[Mich_]

Attenzione che stai facendo confusione.

display: inline trasforma il blocco in inline, per cui non e` adatto ad inserire oggetti contenenti altri oggetti oppure cose diverse da testi o immagini.
Per cui se lo applichi ad un <div> il risultato potrebbe essere un gran caos.
Invece puo` essere indicato in qualche caso (ma non generalizziamo) per un[*], che contiene solo una scritta.
Un oggetto inline non puo` avere dimensioni.

Per affiacare due blocchi, occorre usare il float.
In alternativa si possono usare i posizionamenti, che pero` falliscono se il blocco non ha una misura definita.

[merlinox]

Aggiungo questo dubbio.
Ho un layout a 2 colonne (menuSx, content)

#menuSx{
width: 200px;
margin: 0;
float: left;
}

#content{
margin-left: 200px;
padding: 8px 0px 10px 10px;
display: block;
vertical-align: top;
}
#content #col1, #content #col2{
float: left;
width: 200px;
}

Ho creato due colonne interne a #content affiancando due div tramite il float a sx (col1, col2).
Il problema è sorto al momento in cui volevo inserire un <hr> in chiusura delle due colonne col1 e col2.
Inserendo <hr> con style="clear:left", non solo compariva dopo le due colonne, ma compariva dopo il #menuSx

Come risolvere il problema? Impostare a mano le dimensioni di col1 e col2 in modo siano uguali?

[Mich_]

Metti in float anche il contenitore delle due colonne.
E` un bug dei browser, che viene aggirato mettendo tutto float.

PS: non sono sicuro di aver capito correttamente.

[merlinox]

Originariamente inviato da Mich_
Metti in float anche il contenitore delle due colonne.
E` un bug dei browser, che viene aggirato mettendo tutto float.

PS: non sono sicuro di aver capito correttamente.

Scusami non ho postato l'html
<div id="menuSx">
</div>
<div id="content">
<div id="col1">xxx</div>
<div id="col2">yyy</div>
<hr style="clear:left" />
</div>

Alla fine HR va a fare il clear a tutto.