HTML <div>: più veloce del table. Perché?

[fcaldera]

Allora creerei un div per ogni riga, con annidati un div per la colonna di sinistra e uno per quella di destra stilati a float; ora però il div contenitore non si estende alla lunghezza della maggiore delle due colonne adattandosi, per cui devo inserire un div vuoto clear:both, che secondo me è una porcata ma non so come fare.

forum css (o google), cerca "float easyclearing"
che è una tecnica di clearing non strutturale sui contenitori del float.

Allora, di riga in riga, devo usare un contenitore div con lo sfondo del colore dello sfondo della colonna che viene più corta, a seconda di quale essa sia.

non mi è molto chiaro cosa intendi (e come invece lo faresti con le tabelle)

[Nillus]

Se la colonna di sinistra (sfondo giallo) è più alta (perché ha più contenuto) di quella a destra, lo sfondo del div relativo sarà adiacente (margin: 0 a quello della precedente e successiva, e nella colonna non ci saranno righe orizzontali bianche che spezzano lo sfondo giallo della colonna di sinistra. Tuttavia, se la relativa div destra, a sfondo azzurro, ha meno contenuto ed è più corta, allora tra lei e la div di destra seguente (immediatamente sotto) ci sarà una area rettangolare alla quale non si estende il div di destra, e quindi si vedrà il colore o immagine di sfondo del div contenitore.
Risolverei dando al div contenitore il colore di sfondo della colonna di destra, azzurro. Tuttavia, se la riga successiva ha la colonna di destra più alta di quella di sinistra, allora il problema si ripresenterà a sinistra, e dovrei quindi assegnare al div contenitore un colore di sfondo giallo, e non più azzurro...

Quindi, se in una riga la cella di destra è più alta della sinistra, ci vuole un div contenitore con colore di sfondo uguale a quello della colonna di sinistra, mentre se è più alta quella sinistra il div contenitore deve avere lo stesso colore della destra. Cioè devo dare a seconda del contenuto al div contenitore l'una o l'altra classe.
Questo per il mio caso per ora va bene, ma in futuro progettiamo di importare i contenuti da db, per cui non sarà più possibile (oltre che ovviamente non corretto da un punto di vista di markup) aggiustare il tipo di classe del div contenitore a seconda di quale colonna sia più alta caso per caso.
Agire con un js che calcolasse queste altezze e di conseguenza assegni ai div contenitori l'una o l'altra classe sarebbe orribile e mi rifiuto, come già detto nei post precedenti da altri interventi.

Con float easy clearing comunque ho trovato qualcosa di interessante che potrebbe fare al caso mio. Grazie della dritta e scusa la mia dilettantezza!

[fcaldera]

Originariamente inviato da Nillus
Se la colonna di sinistra (sfondo giallo) è più alta (perché ha più contenuto) di quella a destra, lo sfondo del div relativo sarà adiacente (margin: 0 a quello della precedente e successiva, e nella colonna non ci saranno righe orizzontali bianche che spezzano lo sfondo giallo della colonna di sinistra. Tuttavia, se la relativa div destra, a sfondo azzurro, ha meno contenuto ed è più corta, allora tra lei e la div di destra seguente (immediatamente sotto) ci sarà una area rettangolare alla quale non si estende il div di destra, e quindi si vedrà il colore o immagine di sfondo del div contenitore.

scusami davvero, ma se ti spieghi con un esempio visivo mi aiuteresti davvero tanto perchè non riesco a capire cosa cerchi di fare (magari se mi fai un esempio di codice a tabelle, visto che con quelle dici che si può fare)

ad ogni modo, a prescindere da ciò che tenti di fare "la lunghezza della colonna" non è un informazione semantica: oltretutto nelle WAI-WCAG (web accessibility guidelines), è anche specificato di non veicolare informazioni unicamente tramite colori.

Quindi visto che useresti il colore a scopo puramente presentazionale, potresti demandare questo specifico compito a javascript (purché in modo non intrusivo)

[fcaldera]

ma stai parlando delle false colonne?

dai un occhio a questo esempio
http://line25.com/wp-content/uploads...demo/demo.html

ci sono tre colonne di diversa altezza però visivamente sembrano terminare alla stessa altezza

hanno semplicemente messo questa immagine ripetuta in verticale sul blocco che le contiene.

[k.b]

Se le colonne sono larghe uguali e la loro larghezza e' nota a priori (mi scuso se l'hai gia' detto e mi e' sfuggito) e cambia solo l'altezza, allora si puoi usare la tecnica delle faux columns: nel div contenitore metti un'immagine di sfondo che riproduca la divisione in colori delle due "celle" e i div col contenuto avranno sfondo trasparente ed appariranno divise dai colori dello sfondo. Se la larghezza varia o non e' nota, allora questa tecnica non si applica. Resta il fatto che - a mio parere - dover ricorrere a un trucco come un'immagine di sfondo, indica un'evidente carenza negli strumenti offerti dall'attuale versione dei CSS.

[k.b]

Comunque l'idea e' che se devi riprodurre i dati di una tabella, dovresti usare - beh - una tabella. Usare una tabella per dati tabellari e' semanticamente inattaccabile

[Nillus]

Vi ringrazio per l'aiuto.

I dati originali sono disposti a tabella, ma come dicevo sono dati complessi, con tag html, immagini, legend e altri span con varie classi, per cui semanticamente non potrebbero essere tabellati...

Quanto al post di una figura non so come fare ad inserirla, il mio sito non è ancora online, ma penso che la tecnica a false colonne potrebbe andar bene. Tuttavia, do un po' ragione a k.b che questa soluzione non è il massimo... Se dovessi cambiare layout devo rifare anche lo sfondo, il che non è il massimo. Differente era se era una testata di una pagina.

Ti posto il codice che da il problema di sfondo vuoto:

HTML:

<body>
 <div class="container">
  <div class="sx">Colonna 1</div>
  <div class="dx">Colonne uguali: nessun problema</div>
  <div class="end"></div>
 </div>

<div class="container">
  <div class="sx">Colonne disuguali</div>
  <div class="dx">Questa è più alta; si crea un vuoto nella colonna a fianco

...</div>
  <div class="end"></div>
</div>

<div class="container">
  <div class="sx">Questa volta è questa colonna ad essere più alta e quindi è a destra che si crea un vuoto perché il div non si espande a coprire tutto il div contenitore</div>
  <div class="dx">
Colonna piccola</div>
  <div class="end"></div>
</div>

<div class="container">
  <div class="dx">Ultima cosa da notare, le due colonne sono seguite da un div con clear:both perché il div contenitore si estenda alla più alta delle due colonne</div>
  <div class="sx">Sembra che la pagina che mi hai consigliato dia risposte su questo problema (easy float e clear) ma non ho avuto acnora modo di approfondire che ultimamente sono impegnato</div>
  <div class="end"></div>
</div>

<div class="container">
 Grazie comunque a tutti dell'attenzione e dei consigli
<div class="end"></div>
</div>

</body>
</html>

CSS:

.container
{
//background-color: #ffff99; //Colore dello sfondo di sx
width: 90%;
margin: 0 auto;
padding: 0em;
}

.sx
{
background-color: #ffff99;
width: 30%; //height: 100%;
float: left;
text-align: center;
padding: 0em; margin: 0px;
}

.dx
{
background-color: #ccffff;
width: 70%; //height: 100%;
float: right;
text-align: left;
padding: 0em; margin: 0px;
}

.end{clear:both;}

Ecco, se lo copi e incolli dovresti vedere i vuoti che si creano. Ho visto comunque sul sito http://www.positioniseverything.net/easyclearing.html un interessante articolo che mi potrebbe essere utile ma non ho ancora avuto il tempo di leggerlo tutto con cura.

Anche le faux columns potrebbero andare, risolvendo il problema alla radice in quanto il colore di sfondo non è più affidato all'adattamento delle colonne interne dei div contenitori al contenitore stesso. Ma... questo modo di fare layout è corretto?

[fcaldera]

1) <div class="end"></div>
questa non serve se usi l'easyclearing

2) non sei costretto a <div>ificare tutto. esistono altri elementi
ad esempio hai considerato di usare una semplice lista <ul> per "riga"?

ad esempio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
        * {
			margin				: 0;
			padding				: 0;
		}
        
        /* easyclearing */

		div ul:after {
			clear				: both;
			visibility			: hidden;
			content				: " ";
			display				: block;
			font-size			: 0;
			height				: 0;
		}
        
        * html div ul,							/* IE6 */
		*:first-child+html div ul { 		    /* IE7 */
			zoom		: 1;
		}
       
        div ul {
            width           : 500px;
            display         : block;
            padding         : 10px 0;
            border-bottom   : 1px #ccc solid;
        }
        
        li {
            float           : left;
            display         : inline;      
            width           : 235px;
            padding-right   : 15px;
        }
    
        </style>
        
        
    </head>

<body>


    <div>
        <ul>          [*]
                1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a odio vel dolor vulputate sagittis. 
                Mauris tempus, mi enim volutpat orci, eget pulvinar dolor elit eu metus. 
                Nam velit sapien, pharetra quis eleifend quis, auctor vel felis. 
                Aenean sodales augue sit amet est dignissim id sollicitudin felis molestie. 
                Mauris ornare fringilla elit vitae placerat. Vestibulum viverra blandit dui, 
                quis laoreet diam pharetra quis.
            [*]
                2 Aenean sodales augue sit amet est dignissim id sollicitudin felis molestie. 
                Mauris ornare fringilla elit vitae placerat. Vestibulum viverra blandit dui, 
                quis laoreet diam pharetra quis.
            [/list]
        
        <ul>          [*]
                3 Aenean sodales augue sit amet est dignissim id sollicitudin felis molestie. 
                Mauris ornare fringilla elit vitae placerat. Vestibulum viverra blandit dui, 
                quis laoreet diam pharetra quis.
                        [*]
                4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a odio vel dolor vulputate sagittis. 
                Mauris tempus, mi enim volutpat orci, eget pulvinar dolor elit eu metus. 
                Nam velit sapien, pharetra quis eleifend quis, auctor vel felis. 
                Aenean sodales augue sit amet est dignissim id sollicitudin felis molestie. 
                Mauris ornare fringilla elit vitae placerat. Vestibulum viverra blandit dui, 
                quis laoreet diam pharetra quis.
            [/list]
    </div>


</body>
</html>

[Nillus]

No, alle liste non ci avevo pensato. Non sono abituato a pensarle per creare layout...

Comunque, usare liste per fare layout, da un punto di vista semantico, non è un abuso al pari di usare tabelle?

La tua soluzione è eccellente, comunque, ti ringrazio molto perché mi sarà molto utile, proprio come modo di pensare. Del resto, ho visto i siti che hai fatto, nella tua home page, e ti faccio i miei complimenti perché sono davvero belli.
Tuttavia il css con zoom:1; non dovrebbe validare perché zoom è proprietario di IE; ci vorrebbe di aggiungere una direttiva esclusiva per IE con i commenti. Ma a parte questo dovrebbe andare.

Grazie di tutto a tutti!

[k.b]

Originariamente inviato da Nillus
Comunque, usare liste per fare layout, da un punto di vista semantico, non è un abuso al pari di usare tabelle?

Se gli elementi che ne fanno parte non sono concettualmente voci di un elenco, allora si, e' semanticamente scorretto usare una lista.