Come affiancare div

intimoviro

Utente Attivo
18 Ago 2009
272
0
0
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

Utente Attivo
15 Dic 2009
686
8
18
58
Udine
www.stilisticamente.com
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.
 

Eliox

Utente Attivo
25 Feb 2005
4.390
3
0
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

Utente Attivo
25 Gen 2004
611
0
16
Pistoia
www.animalfestival.net
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

Utente Attivo
29 Dic 2012
352
3
18
Pistoia
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