• User Attivo

    affiancare div

    Scusate la domanda, ma proprio non riesco...

    Starò diventando scemo (sempre che prima non lo fossi :D) ma non riesco ad affiancare due div.
    se scrivo
    <div></div><div></div>

    Mi vengono 2 div uno sotto l'altro.
    non riesco ad affiancarli manco con qualche attributo. Probabilmente scelgo quelli sbagliati.

    Come si fa?? sono proprio in panne...


  • User Attivo

    io ho provato una volta, coi div, come hai detto giustamente tu, non si riesce.
    io la risolverei con i CSS, ho letto in una guida (www.html.it) che servono a fare anche le colonne, i paragrafi che con l'HTML puro non si possono fare. ti segnalo questa pagina, vedi se fa al caso tuo: http://css.html.it/guide/lezione/65/layout-a-due-e-tre-colonne-introduzione/


  • User

    Ciao,
    se vuoi affiancare 2 div devi usare per entrambi i div l'attributo float, ad esempio così: style="float:left;". Se lo usi per entrambi i div ti funzionerà sia con explorer che con firefox, se invece lo usi solo con un div non ti funzionerà con explorer.
    Il concetto è questo: col primo float (settato a left) imposti il primo div tutto a sinistra (puoi anche settarlo a right e il div va tutto a destra), col secondo float "dici" al div di andare ancora tutto a sinistra, ma così si metterà appena dopo il primo, ed il gioco è fatto...attento però a dimensionare in modo opportuno il secondo div, ossia setta l'attributo width in modo che la sua dimensione stia dentro alla pagina (in orizzontale), altrimenti il div ti si sposterà sotto...
    Spero di essere stato chiaro..


  • Moderatore

    Perfetto.
    O in alternativa potresti anche dare la posizione assoluta:

    style="position:absolute; left:0; width:200px;" per il primo
    style="position:absolute; left:200px; width:200px;" per il secondo

    :ciauz:


  • User

    Se i due box sono all'interno di un box più grande puoi usare il "float"

    style="margin-left:0px; float: left; width:200px;"
    style="margin-left:200px; float: left; width:200px;"

    adesso che ci penso sorge un dubbio anche a me: usando, come ha fatto massy, "position:absolute" per i div che sono all'interno di un'altro div, i valori fanno riferimento all'inizio della pagina o all'inizio del div (per inizio intendo in alto a sinistra)?

    Ah approditto per salutare tutti poichè è ilmio primo post in questa sezione :D.


  • Moderatore

    i valori fanno riferimento all'inizio della pagina o all'inizio del div (per inizio intendo in alto a sinistra)?

    Fanno riferimento al primo contenitore indicato come relativo, o in mancanza al body.

    🙂


  • User

    grazie 🙂


  • User Attivo

    Comunque il valore float va bene, ma limitante a soli 2 div.
    Una regolazione con relative e absolute, benchè più complessa, mi sembra molto più libera.

    Grazie a tutti comunque


  • Moderatore

    Comunque il valore float va bene, ma limitante a soli 2 div.
    Perché?

    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="clear:left;">bla bla</div>

    funge meravigliosamente 🙂


  • User Attivo

    @massy said:

    Perché?

    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="width:100px; float:left;">bla bla</div>
    <div style="clear:left;">bla bla</div>

    funge meravigliosamente 🙂 :173:


  • User

    sì, infatti, oltretutto il "float" è stato creato per permettere la disposizione dinamica dei blocchi (box, div come vi pare).
    Una fila di blocchi allineata sulla stessa riga conil "float" si dispone automaticamente su più righe quando lo spazio in larghezza non è sufficiente a contenerli tutti.


  • User

    ah, mi sovviene una cosa solo ora riguardo ai "float": se impostate i margini ai box che hanno quest'attributo dovete inserire, almeno nel primo box (quello più asinistra con "float:left" e viceversa) dovete inserire "display: inline" altrimenti Internet Explorer a causa di un bug raddoppia il margine rispetto al box esterno.

    Così insomma:

    div { float: left; margin-left: 10px; dispay:inline; }

    :ciauz: