Disposizione div, il float non lo capisco.

[Bobbix]

Devo ottenere un layout fatto più o meno così (lo so non si vede bene ma gli spazi vengono eliminati qua).

------------------------------------------------------
| div header |
------------------------------------------------------
| | | |
| div sx | div contenuti | div dx |
| auto | 1024px | auto |
| | | |
| | | |
------------------------------------------------------
| div footer |
------------------------------------------------------

html è il seguente:

<div id="area-sito"> 	
  <div id="area-testata">
    <div id="testata-intestazione">
      Qua ci va il logo e L'intestazione del sito
    </div>
  </div>
  <div id="area-contenuti">
    <div id="contenuti-sx">
      SX
    </div>
    <div id="contenuti">
      Contenuti
    </div>
    <div id="contenuti-dx">
      DX
    </div>
  </div>
  <div id="area-piepagina">
    Piè Pagina
  </div>
</div>

Nel css avrei dato float: left all'id "contenuti-sx" e "contenuti" e float: right a "contenuti-dx"
Il risultato è disastroso.

- div contenuti deve essere largo 1024px
- i div sx e dx devono occupare dinamicamente lo spazio restante dello schermo (sapendoche il div centrale è di 1024px).

Beh, ho letto manuali, spulciato esempi, sguardato sorgenti di altri siti... makkè. Direi che sono proprio negato. E' proprio che NON ci arrivo (me la prendo con me stesso ovviamente).

Una banalità simile sarebbe stata questione di 10 nanosecondi con le tabelle... ma evidentemente tabelle e div non possono essere equiparabili.

Per ora ho rinunciato ai div sx e dx perchè non riesco a farli stare assieme, ma se scrivo qua è per avere un lume su questo problema apparentemente banale.
Voi come scrivereste il css in base a quel codice html che ho postato? (Semprechè il problema non dipenda anche dall'html).

Grazie.

[simotenax]

http://css.html.it/articoli/leggi/53...ria-e-pratica/

usando i float è buona norma direzionare tutti i div flottanti da una parte

nel tuo caso andra a mettere tutti o in float:left o in float:right i seguenti div:
#contenuti-sx
#contenuti
#contenuti-dx

poi dovrai impostare loro una larghezza fissa ed infine chiudere questi 3 div con un clear

comunque l'articolo che ti ho linkato è più che esplicativo, dovrebbe esserti sufficiente per capire

[Bobbix]

Grazie.. lo leggerò molto attentamente.

Comunque il mio problema (se ho capito bene) è che se metto tutti e tre assieme i div in float left (o right) e non specifico la larghezza, non li vedo proprio.

Nel mio caso vorrei specificare la larghezza di quello centrale (1024) e gli altri a sx e a dx dovrebbero dimensionarsi automaticamente.

Beh se i div sx e dx non hanno contenuti non c'è verso di vederli, e se vi metto contenuti li vedo solo per la dimensione dei contenuti stessi.
Se invece gli do una larghezza definita, su schermi più piccoli va a finire che il div dx lo trovo su nuova riga.

Comunque sono riuscito a trovare un buon compromesso usando un solo div centrale ma come ho detto è un compromesso (e non ne sono orgoglioso).


Leggerò attentamente la guida che mi hai postato, farò delle prove... e prima o poi ne verrò a capo.
Grazie.


P.S. W Ubuntu (Attendo con ansia l'imminente LTS).