container si riduce, div restano fuori

[francio000]

ciao!

ieri sera ho cominciato a realizzare un semplice template per divertimento...
PROBLEMA: il "container" si ferma a metà pagina, ma non si estende man mano che aggiungo contenuti, come il div "news", che resta fuori parzialmente.
Io vorrei modificarlo nel modo che man mano che aggiungo box, questo si estende, inglobandoli.
Dove ho sbagliato?

Altra cosa: perchè se rimuovo il border: 1px solid #000 del "container" mi riduce l'"header" in altezza riducendolo?

LINK: link al template

se ci sono consigli/modifiche, ben volentieri data la mia esperienza cmq limitata.

grazie!
Francesco

[made1979]

Ho dato un'occhiata veloce al codice e al CSS, ma da come hai detto penso proprio che hai dimenticato di specificare il selettore float: (left o right) per i <div> contenuti in #container.
Ultima cosa: cerca di sostituite quelle tabelle con <div> o con degli elenchi <ul>, ti semplificherai di molto il lavoro.

[francio000]

ciao!

no guarda, allora per i vari div contenuti nel #container ho usato appunto un float: left per il div di sinistra e un float: right per quello di destra, occupando esattamente tutto lo spazio disponibile, dopodichè ho usato un div con class .br specificando clear: both, così da mandare i due div seguenti sotto (per ora ne ho messo solo uno)
Problema è che il div più in basso mi esce dal #container.

Che faccio secondo te per estendere il #container??
Per le tabelle, provvederò a sostituire con ul o con dei div!

grazie per la gentile risposta!
francesco (francio)

[Myaku]

Originariamente inviato da francio000
Che faccio secondo te per estendere il #container??

overflow: hidden; height: auto;

(testato con firebug)

[francio000]

allora, innanzitutto grazie per le risposte, mi sono servite! (overflow: hidden funziona!)

Volevo chiedere:
io so che la proprietà overflow: hidden serve teoricamente per nascondere testo in eccesso in un <div>, rendendolo invisibile all'utente, mentre se lo imposto per esempio su "scroll" mette le scrollbar etc.
In questo caso, se io lo imposto nel mio #container, quest'ultimo si allunga inglobando il contenuto, non nascondendolo: quindi qual è la funzione in questo caso di "overflow: hidden"?

Secondo:
Ho impostato un "padding-bottom" al mio #container per evitare che il #footer (impostato con "position: absolute" e "bottom: 0" restando sempre in fondo) copra il contenuto delle ultime righe dei vari div, in questo caso ho fatto bene, o dovevo agire in altra maniera?

Terzo: per la tabella, io ho scelto questa tipologia (e non <div> o <ul>) perchè così potevo ottenere una bordatura impostando un colore di sfondo a essa che trasparisse colorando i vari <td> di bianco e usando cellspacing="1"
Se uso dei <div> o <ul> però per la bordatura, impostando anche solo un "border: 1px solid #000" questa mi si ripete tra un div e l'altro diventando di 2px, perciò dovrei impostare delle classi per specificare i bordi da evidenziare per ogni <div>: non è più comodo con le tabelle?

ciao e scusate per il disturbo!
Francesco

[codencode]

Sul discorso del padding-bottom penso sia uno dei modi validi per risolvere.
Sul discorso delle tabelle, ritengo che non sia semantico utilizzarle. Meglio e più giusto usare gli ul, formattati per bene. Il problema dei bordi si risolve con i css facendo collassare i bordi in comune.

[Myaku]

Originariamente inviato da francio000
In questo caso, se io lo imposto nel mio #container, quest'ultimo si allunga inglobando il contenuto, non nascondendolo: quindi qual è la funzione in questo caso di "overflow: hidden"?

serve per fare il clearing del float

Secondo:
Ho impostato un "padding-bottom" al mio #container per evitare che il #footer (impostato con "position: absolute" e "bottom: 0" restando sempre in fondo) copra il contenuto delle ultime righe dei vari div, in questo caso ho fatto bene, o dovevo agire in altra maniera?

visto che il footer sta dopo i contenuti, mi pare di intuire, nel normale flusso del documento, secondo me non serve usare posizionamenti

Terzo: per la tabella, io ho scelto questa tipologia (e non <div> o <ul>) perchè così potevo ottenere una bordatura impostando un colore di sfondo a essa che trasparisse colorando i vari <td> di bianco e usando cellspacing="1"
Se uso dei <div> o <ul> però per la bordatura, impostando anche solo un "border: 1px solid #000" questa mi si ripete tra un div e l'altro diventando di 2px, perciò dovrei impostare delle classi per specificare i bordi da evidenziare per ogni <div>: non è più comodo con le tabelle?

se sono dati tabellari, ovvero che hanno una corrispondenza riga/colonna (come nel caso in cui lavori un foglio excel, per intenderci), l'uso delle tabelle è corretto. Dipende quindi da cosa questi contenuti rappresentano.
Un po' meno l'uso di formattazioni html (cellspacing & co) che andrebbero sostituite con i css.

Altra cosa importante, usa un doctype (possibilmente strict), altrimenti mandi i browser in quirksmode

[codencode]

Originariamente inviato da Myaku
visto che il footer sta dopo i contenuti, mi pare di intuire, nel normale flusso del documento, secondo me non serve usare posizionamenti

Usare il posizionamento assoluto del footer con bottom:0 serve a fare in modo che il footer rimanga attaccato al bordo inferiore dello schermo nel caso che la lunghezza della pagina non superi la dimensione del monitor.

[Myaku]

Originariamente inviato da codencode
Usare il posizionamento assoluto del footer con bottom:0 serve a fare in modo che il footer rimanga attaccato al bordo inferiore dello schermo nel caso che la lunghezza della pagina non superi la dimensione del monitor.

si scusami, avevo guardato solo l'html dove lo vedevo inserito nel container, ho bypassato il css. Chiedo venia

[francio000]

ok ragazzi!

Allora ho aggiunto il doctype strict, ho cambiato la tabella (nascosta) con <ul> e[*] distribuiti su due colonne:
a questo proposito un dettaglio: pur mantenendo dimensione del font di 76% e margin di 10px ai link, questo mi sembra ridotto rispetto a prima in dimensione...
Ah, per far "collassare" i bordi tra un[*]sopra e un[*] sotto? Perchè se no quel bordo di separazione diventa doppio...come faccio?

Inoltre ho notato che pur avendo messo un margin:10px auto, in tutti i browser (tranne mozilla) questi 10px vengono mantenuti solo in alto, mentre in basso non li conta, come se ci fosse margin-bottom: 0;
Voi cosa dite?

Per il resto direi siamo a posto...

Francio