[CSS] problema con dimensionamento verticale dei div

[alfonsovincenzo]

ciao a tutti,

il problema che ho io è evidente a questo indirizzo:

www.osnap.eu/bianca.php

il div corpo pagina va sopra il footer e il div contenitore non si adatta all'altezza della pagina (o a quella di div figli).

ora se avessi usato le tabelle per impaginare il sito avrei risolto, ma visto che i css più li capisco più mi piacciono mi rifiuto di tornare all'antico, per questo mi potete aiutare please?

il codice del css è:

html, body {
    width: 100%;
    height: 100%;
    }
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 0px;
    margin: 0px;
    }
    #contenitore {
    width: 900px;
    background-color: #CCCC99;
    margin: 0 auto;
    position: relative;
    min-height: 100%;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-color: #000000;
    border-left-color: #000000;
    }
#barra_head {  /*  barra sopra la testata della pagina */
    width: auto;
    padding: 10px;
    height: 20px;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: #000000;
    text-align: right;
    font-size: 12px;
    }
#testata {  /*  testata della pagina */
    width: auto;
    padding: 20px;
    height: 100px;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: #000000;
    font-size: 12px;
    }
    /* barra di navigazione  che si trova a sin*/
    #barra_navigazione {
    width: 20%; /* indica il colore dello sfondo */
    padding: 0px; /* indica la distanza del contenuto della barra dal suo bordo */
    float: left;
    margin: 0px;
    font-size: 12px;
    }
#titoli_menu_sinistra {
    width: 89%; /* indica il colore dello sfondo */
    padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
    float: left; /* indica la posizione dell'area */
    background-color: #999999;
    margin: 0px;
    font-size: 12px;
    position: relative;
}

#menu_sinistra {
    width: 89%; /* indica il colore dello sfondo */
    padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
    float: left; /* indica la posizione dell'area */
    background-color: #99FFFF;
    margin: 0px;
    font-size: 12px;
    position: relative;
}

    /* corpo della pagina che si trova a fianco della barra di navigazione */
    #corpo_pagina {
    width: 77%; /* indica il colore dello sfondo */
    padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
    float: left;
    border-left-width: 1px;
    border-left-style: dotted;
    border-left-color: #000000;
    font-size: 12px;
    }
#footer {
    width: 860px;
    padding: 20px;
    bottom: 0px;
    height: 50px;
    clear: left;
    position: fixed;
    border-top-width: thin;
    border-top-style: dotted;
    border-top-color: #000000;
    text-align: center;
    font-size: 12px;
}

grazie!

[pr0v4]

La soluzione e' semplice, dopo aver pulito il footer dal float, hai dato un position: fixed; che non permette al footer di abbassarsi fino all'altezza necessaria per contenere il corpo.

Perdona una cosa, ma non e' che tante volte hai problemi con i codici css? Nn voglio fare il presuntuoso, ma al limite quello che hai commentato indica la larghezza, e non il colore di sfondo; se vogliamo essere precisi da questo:

width: 89%; /* indica il colore dello sfondo */

dovremmo arrivare a questo:

width: 89%; /* indica la larghezza del box */
background-color: <colore> /*indica il colore dello sfondo */

Per qualsiasi problema sono sempre qua!

[alfonsovincenzo]

si sono alle prime armi con il css, ma alcuni commenti sono antecedenti a modifiche e non aggiornati.

per risolvere quindi cosa dovrei fare togliere il position: fixed? e sostituirlo con cosa?

grazie!

[pr0v4]

Con niente :P
Toglilo semplicemente e la pagina riprendera' il suo corso

[alfonsovincenzo]

ok, ora funziona ma c'è ancora un piccolo problema, io voglio che il footer sia sempre a piè di pagina e non come ora:

www.osnap.eu/bianca.php

[pr0v4]

Quindi vuoi che il footer sia sempre in fondo alla pagina anche se il l'altezza del div sopra e' piu' alta eh...
prova allora riattivando il position: fixed, e al contenitore imposta un overflow:visible;

Dimmi poi come va.

[alfonsovincenzo]

Originariamente inviato da pr0v4
Quindi vuoi che il footer sia sempre in fondo alla pagina anche se il l'altezza del div sopra e' piu' alta eh...
prova allora riattivando il position: fixed, e al contenitore imposta un overflow:visible;

Dimmi poi come va.

veramente vorrei che il footer fosse sempre in basso e che il div corpo pagina vada sempre a toccare il footer, anche se il contenuto è poco.

es1 vedi a sin il tratteggio non arriva in fondo alla pagina

www.osnap.eu/bianca.php

es2 come lo vorrei io ma senza la sovrapposizione dei div (ho messo come dici tu position: fixed)

www.osnap.eu/bianca2.php

[alfonsovincenzo]

up,

ma non c'è soluzione?

[alfonsovincenzo]

up,

più di 70 letture e nessuno che sa aiutarmi, ma non è possibile fare questa cosa con i css?

ditemelo che così evito di scervellarmi con le prove.

come al solito grazie per le risposte

[Paper-bat]

io proverei così poi mi dici ^_^

	html, body {
	width: 100%;
	height: 100%;
	}
	body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	}
	#contenitore {
	width: 900px;
	background-color: #CCCC99;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-right-color: #000000;
	border-left-color: #000000;
	overflow:visible;
	}
#barra_head {  /*  barra sopra la testata della pagina */
	width: auto;
	padding: 10px;
	height: 20px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	text-align: right;
	font-size: 12px;
	}
#testata {  /*  testata della pagina */
	width: auto;
	padding: 20px;
	height: 100px;
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #000000;
	font-size: 12px;
	}
	/* barra di navigazione  che si trova a sin*/
	#barra_navigazione {
	width: 20%; /* indica il colore dello sfondo */
	padding: 0px; /* indica la distanza del contenuto della barra dal suo bordo */
	float: left;
	margin: 0px;
	font-size: 12px;
	}
#titoli_menu_sinistra {
	width: 89%; /* indica il colore dello sfondo */
	padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
	float: left; /* indica la posizione dell'area */
	background-color: #999999;
	margin: 0px;
	font-size: 12px;
	position: relative;
}

#menu_sinistra {
	width: 89%; /* indica il colore dello sfondo */
	padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
	float: left; /* indica la posizione dell'area */
	background-color: #99FFFF;
	margin: 0px;
	font-size: 12px;
	position: relative;
}

	/* corpo della pagina che si trova a fianco della barra di navigazione */
	#corpo_pagina {
	width: 77%; /* indica il colore dello sfondo */
	padding: 10px; /* indica la distanza del contenuto della barra dal suo bordo */
	float: right; /**-> modficata in right prima era left**/
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #000000;
	font-size: 12px;
	color: #CCCC99;
	}
#footer {
	width: 860px;
	padding: 20px;
	bottom: 0px;
	height: 40px;
	clear: both; /** -> modficata in both prima era left **/
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #000000;
	text-align: center;
	font-size: 12px;
	/** position: fixed; <-- tolto **/
}