• H
    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...

    0
  • S
    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/

    0
  • I
    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..

    0
  • massy
    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:

    0
  • M
    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.

    0
  • massy
    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.

    🙂

    0
  • M
    User •

    grazie 🙂

    0
  • H
    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

    0
  • massy
    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 🙂

    0
  • H
    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:

    0
  • M
    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.

    0
  • M
    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:

    0
Effettua l'accesso per rispondere