Per capire meglio come funzionano i DIV è preferibile fare delle prove con lo style inserito direttamente nella pagina.
Al limite poi si porta lo stile nei CSS.
Ad esempio questa è una tabella con bordo che contiene due tabelle interne, una sinistra e una destra, in pratica una tabella a due colonne.
Codice: Seleziona tutto
<div style="width= 900px; border: 1px solid #008000; padding: 5px;">
<div style="float: left; width: 430px; border: 1px solid #008000; padding: 5px; text-align: center;">
<p>testo prima colonna</p>
</div>
<div style="float: left; width: 430px; margin-left: 10px; border: 1px solid #008000; padding: 5px; text-align: center;">
<p>testo seconda colonna</p>
</div>
<div style="clear: both;"></div>
<br />
</div>
</div>
Il valore "float: left" mantiene i div sulla stessa linea, con
<div style="clear: both;"></div>
termina l'inserimento in linea.
Ovviamente si può intervenire sul font, sul colore di fondo, sul colore del testo, sulla dimensione, tutto tramite i tag style che una volta realizzata la pagina si possono portare sul CSS oppure usare le classi già esistenti.
Il problema è che usare le classi senza sapere quello che fanno non aiuta a comprendere il meccanismo.
Lo style Subsilver2 è basato sui <table> ma l'uso dei table è stato ridimensionato con HTML5, tanto che è possibile che in futuro subsilver2 venga abbandonato.
La mia Home page
http://www.actafungorum.org/ è completamante basata sui <div>