Floating div
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL FLUSSO
• I diversi box sono inseriti nel così detto “flusso”
• I box a livello di blocco (compresi i box anonimi) si
dispongono uno di seguito all’altro in verticale,
distanziandosi in base ai margini
• I box in linea (compresi i box anonimi) si
dispongono orizzontalmente uno di seguito
all’altro, su una o più linee a seconda dello spazio.
• La loro spaziatura orizzontale è determinata
anche da margini, bordi e padding.
La spaziatura verticale è determinata solo
dall’interlinea (line-height)
p { border:1px solid #00C; }
em{ margin:2em;border:1px solid #C00 }
strong {
border:1px solid #0C0;
padding:0.7em;
}
Asolute: stacco il div dal flusso verticale.
Faccio riferimento al rpimo blocco relative
per posizionarlo
Fixed: stacco il div dal flusso verticale.
Faccio riferimento al viewport per
posizionarlo
relative: NON stacco il div dal flusso
verticale. Serve solo per dare uno
spostamento al div nel normale flusso
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Un box flottante è posizionato
all’interno del flusso in modo che i
contenuti dei box successivi si
dispongano attorno al box
• Un box flottante posiziona lungo il
lato sinistro ovvero lungo il lato
destro del box che lo contiene
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Attraverso la proprietà float è possibile assegnare verso
quale lato il box deve disporsi
La proprietà float può assumere tre valori: left, right,
none
• Un box flottante, se non si specifica un valore per la proprietà
width, assume la dimensione necessaria a contenere gli
elementi al suo interno
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
<div id=‘2’></div>
<div id=‘4’></div>
#2 {
float:left;
width:200px;
}
#4 {
float:right;
width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• I margini inferiore e superiore di un
box flottante non collassano
• Il box flottante è eliminato dal
normale flusso per cui non influenza
la disposizione degli altri box, ma
solo la disposizione dei contenuti
• E’ come se li staccassi dal flusso
verticale e questi ci
«galeggiassero» sopra
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
Per interrompere l’effetto della
proprietà float e ripristinare il
normale flusso si usa la proprietà
‘clear’, che può assumere i valori:
left, right, both, none
#2 {
float:left;
width:200px;
}
#4 { clear: both }
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
• Come detto in precedenza, i box flottanti
non influenzano il normale flusso dei
blocchi
• Un box flottante contenuto in un blocco
non dovrebbe dunque condizionare in
nessun modo l’altezza del blocco
contenitore
#column_left {
float:left; width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
se anche il blocco contenitore è
flottante, allora i blocchi flottanti
contenuti ne influenzano l’altezza:
#left {
float:left; width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
se il blocco contenitore non è
flottante, questo è l’unico caso in cui
esso non assume le dimensioni
massime del suo contenuto.
In questo caso si utilizza del codice
differente:
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
#content{
width: 960px;
height:auto;
overflow:auto;
}
#left {
width: 209px;
height: 500px;
float: left;
border-right: 1px solid #D3D3D3;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
In particolare si assegna al box contenitore una altezza
automatica e l’overflow (ovvero l’eccesso della
dimensione) auotmatico.
In questo modo il div contenitore crescera in automatico.
height:auto;
overflow:auto;
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Internet Explorer per Windows presenta altri difetti relativi ai box
flottanti
• In alcuni casi questi difetti possono essere corretti attraverso
delle regole da specificare solo* per Internet Explorer
* Come specificare delle regole particolari per Internet Explorer/Windows sarà illustrato nella seconda
parte del seminario