Chi crea template saprà che ad esempio creando un template a due colonne, l' uso del tag <table> è errato, quindi bisogna ricorrere ad altro.
Ma a cosa?
Esiste una proprietà di nome float , che toglie l' elemento dal suo flusso e lo posiziona a seconda della caratteristica del float, se ad esempio è float: left; lo posiziona a sinistra, float: right a destra.
L' uso di tale proprietà è molto semplice, vediamo subito un esempio pratico.
Ecco qua l' esempio. Come notiamo abbiamo assegnato al terzo div la proprietà float:right; , quindi si andrà a posizionare a destra.
Potevamo mettere quel div anche prima del content, ma avendo float come proprietà si sarebbe sempre andato a mettere a destra. Però, per chi ha sperimentato questa proprietà, saprà che se il div con float supera l' altezza del container (che avrà height: auto; ) quest' ultimo rimarrà all' altezza del div content, mentre la colonna di destra uscirà fuori. Come risolvere?
Basterà aggiungere dopo il div flottante un elemento blocco (solitamente si usa <hr> o <div>), che abbia come proprietà "clear: both". Questa proprietà indica che l' elemento che la possiede non può avere elementi allineati a destra o sinistra. Tornando al codice quindi, si modificherà così:
Questo è tutto, come avete visto è molto semplice l' uso della proprietà. Come si diceva prima, il tag <table> , se volete lo potete usare a questo scopo ma è sbagliato, se dovete fare una cosa professionale specialmente. Il tag table serve per impaginare dati, non per allineare blocchi.
Ma a cosa?
Esiste una proprietà di nome float , che toglie l' elemento dal suo flusso e lo posiziona a seconda della caratteristica del float, se ad esempio è float: left; lo posiziona a sinistra, float: right a destra.
L' uso di tale proprietà è molto semplice, vediamo subito un esempio pratico.
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco qua l' esempio. Come notiamo abbiamo assegnato al terzo div la proprietà float:right; , quindi si andrà a posizionare a destra.
Potevamo mettere quel div anche prima del content, ma avendo float come proprietà si sarebbe sempre andato a mettere a destra. Però, per chi ha sperimentato questa proprietà, saprà che se il div con float supera l' altezza del container (che avrà height: auto; ) quest' ultimo rimarrà all' altezza del div content, mentre la colonna di destra uscirà fuori. Come risolvere?
Basterà aggiungere dopo il div flottante un elemento blocco (solitamente si usa <hr> o <div>), che abbia come proprietà "clear: both". Questa proprietà indica che l' elemento che la possiede non può avere elementi allineati a destra o sinistra. Tornando al codice quindi, si modificherà così:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Questo è tutto, come avete visto è molto semplice l' uso della proprietà. Come si diceva prima, il tag <table> , se volete lo potete usare a questo scopo ma è sbagliato, se dovete fare una cosa professionale specialmente. Il tag table serve per impaginare dati, non per allineare blocchi.