Come affiancare div

intimoviro · 21 Gen 2010

Salve ragazzi, sto creando una pagina in dreamweaver con i div, però non capisco come faccio ad affiancare i div, cioè creo un div contenitore, ora vorrei che all'interno del div contenitore siano inseriti altri tre div in modo orizzontale, come ad esempio per le tabelle tre colonne.
Come posso fare?

Grazie

MarcoGrazia · 21 Gen 2010

Non è difficile ma devi contare i pixel, se ne metti troppi poi gli ultimi scivolano sotto.
Comunque ecco come:
diciamo che crei un tuo layer contenitore della struttura, diciamo largo 700 pixel.

Codice:

#contenitore {width: 700px;}

poi ti crei il modello base dei box da inserirci dentro:

Codice:

#contenitore .box {
  width: 200px;
  float: left;
}

è importante che siano flottanti!
A questo punto il codice xhtml che li contiene:

Codice:

<div id="contenitore">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Tieni presente che è un layout di base e ridotto all'osso, i box saranno senza bordo quindi non li vedrai, non hanno un'altezza predefinita quindi fino a quando non ci metti qualcosa dentro non si vedranno.
Sono 3 larghi 200 pixel l'uno, quindi in tutto 600 pixel, hai ancora 100 pixel da giocare con i margini, ovviamente, è solo un esempio, puoi allargare o restringere a piacere, solo conta i pixel.
Il bordo va contato, con IE è un casino, il box model è differente e anche con Firefox i margini adiacenti collassano, in altre parole devi sempre fare un po' di prove, ma la tecnica è quella che ti ho descritto, il trucco è nel float.

catellostefano · 14 Feb 2013

sai che i copia incolla non si fanno? segnalo la cosa ai moderatori.

Eliox · 15 Feb 2013

Una possibile alternativa senza contenitore:

PHP:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #uno, #due, #tre {
        float: left;
    }
</style>
</head>
<body>
<div id="uno">UNO</div>
<div id="due">DUE</div>
<div id="tre">TRE</div>
</body>
</html>

WpStyle · 15 Feb 2013

catellostefano ha scritto:
sai che i copia incolla non si fanno? segnalo la cosa ai moderatori.

Scusa ma che stai dicendo?
A cosa servirebbero allora certe sezioni del forum?
Se un utente mi chiede un'informazione sul codice penso che meglio di un esempio concreto non ci sia...
Forse ho saltato la lettura qualche parte del regolamento ma non mi sembra ci sia nulla a riguardo.

Jonn · 15 Feb 2013

HTML:

<div id="container" style="width:700px;">
<div id="navleft"  style="float:left; width:200px; background-color:#ff0000;">Navleft</div>
<div id="content" style="float:left; width:300px; background-color:#00ff00;">Content</div>
<div id="navright" style="float:left; width:200px; background-color:#0000ff;">Navright</div>
</div>

L'importante è che i div interni abbiano FLOAT:LEFT che serve appunto per allinearli a sinistra uno accanto a l'altro,
se ti vanno a capo (quindi sotto) vuol dire che:

- WIDTH (di tutti i DIV allineati) + BORDER + MARGIN + PADDING = >700px

borgo italia · 15 Feb 2013

ciao

una domanda: perchè state a disquisire su un post del 2010? penso che l'utente abbia risolto il suo problema

Jonn · 15 Feb 2013

Io non avevo letto la datazione (ops!).
(vale come scusante? ahah!)

Come affiancare div

intimoviro

Utente Attivo

MarcoGrazia

Utente Attivo

catellostefano

Utente Attivo

Eliox

Utente Attivo

WpStyle

Utente Attivo

Jonn

Utente Attivo

borgo italia

Super Moderatore

Jonn

Utente Attivo

Discussioni simili

Come affiancare div

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Utente Attivo

Super Moderatore

Utente Attivo

Discussioni simili

Privacy & Transparency

Privacy & Transparency