Centrare verticalmente con qualsiasi risoluzione

[Gas75]

Salve.
Ho questo mio div container a larghezza fissa e che deve avere un margine top e bottom di 10 px, e questo lo ottengo dando all'intero html e body i margini opportuni...
Problema è che il container ha dentro 5 "righe" di div, di cui solamente una (suddivisa in tre div affiancati da float) dev'essere ad altezza variabile, andandosi ad adattare all'altezza disponibile (finestra browser - 20 px...).

Come faccio a ottenere questo risultato? Credevo che bastasse dare margini 0 sopra e sotto ai div interessati affinché occupassero lo spazio disponibile, ma non funziona perché sotto di essi vedo lo sfondo pagina invece che lo sfondo del div; inoltre il div centrale di quelli ad altezza variabile, ignora l'overflow: auto che dovrebbe apparire quando lo spazio disponibile non basta... invece visualizza tutto il contenuto facendo scorrere l'intera pagina, cosa che vorrei evitare mettendo un overflow: hidden nel css dell'head.

[Graphic Inside]

Devi dare position:relative al body

(position:relative indica che body o qualunque altro elemento farà da ancoraggio all'elemento successivo a cui darai position:absolute)

e position:absolute al tuo div.

Dagli anche i valori top:50%; e left:50%;

[Graphic Inside]

mmmmmm scusa, nel tuo caso non hai solo un div

quindi l'affare è un po più complesso, comunque la strada è sempre quella di agire con position:relative e absolute, e dargli le percentuali a top e left

[Gas75]

Scusate l'ignoranza, ho capito solo che devo dare position: relative al body, ma non ho capito a quale div dare position: absolute e le percentuali di top e left... Al container, a tutti i div da avere ad altezza variabile,...?

[carlomarangoni]

Originariamente inviato da Gas75
Scusate l'ignoranza, ho capito solo che devo dare position: relative al body, ma non ho capito a quale div dare position: absolute e le percentuali di top e left... Al container, a tutti i div da avere ad altezza variabile,...?

Devi usare

position:absolute;left:50%;Top:50%;

nel div che vuoi centrare e devi anche usare i margini negativi

Se posti anche il codice della pagina si può essere più precisi nella risposta

[Graphic Inside]

Dunque,

posto che position:relative e position:absolute devono essere inseriti nei fogli di stile, che il browser sfrutta l'effetto a cascata (per cui, quando metto position:absolute, il browser torna indietro nel codice a cercare l'elemento position:relative) e che position:relative fa da ancora a position:absolute, per cui l'elemento con position:absolute si "allontanerà" dall'elemento con position:relative subito precedente,

tu, per centrare verticalmente la struttura di interesse, dovresti assegnare position:relative al body e position:absolute al div contenente altri div;

Mi pare di aver capito che vuoi una sorta di box centrato nella pagina, a prescindere dal monitor, e quindi la cosa da fare è

body { position:relative; }

#box {position:absolute; top:50%; left:50%; }

il div box sarà centrato nella pagina a prescindere dalla risoluzione e dal monitor. Dentro puoi metterci quello che ti pare..

NATURALMENTE se non lo vuoi in centro alla pagina, invece di dargli top:50% gli dai, chennesò, top:20%;

Naturalmente, top e left determinano la distanza rispettivamente dall'alto e da sinistra rispetto all'ancoraggio che hai scelto (noi abbiam scelto il body per convenzione, ma puoi far sto ambaradan con qualunque elemento)

[Gas75]

Ok, ho seguito le istruzioni ma evidentemente c'è qualche pezzo di css preesistente che sballa le cose perché così facendo il div contenitore invece che centrato orizzontalmente, inizia (lungo l'orizzontale) oltre metà pagina, e quindi esce fuori dalla schermata (perché ha larghezza fissa)!

Ecco il codice dove trovate le vostre indicazioni inserite, in modo da intenderci su quale sia il div contenitore che non riesco a sistemare... main, menu e destro sono i tre div che vorrei ad altezza funzione della risoluzione...

html, body { margin: 10px auto; padding: 0; }
body { position: relative; font: Arial, Helvetica; background-color: #408080; color: #ffffff; text-align: center; }
p { color: #ffffff; font-family: Arial, Helvetica; font-size: 10px; }
table { color: #ffffff; font-family: Arial, Helvetica; font-size: 13px; text-align: center; }
input { font-family: Arial, Helvetica; font-size: 10px; }
a:link { color: #ff00ff; text-decoration: none; font-weight: bold; }
a:visited { color: #ff00ff; text-decoration: none; font-weight: bold; }
a:active { color: #ff0000; text-decoration: none; font-weight: bold; }
a:hover { color: #ff0000; text-decoration: underline; font-weight: bold; }
div#container { position: absolute; top: 50%; left: 50%; width: 980px; margin: 0px auto; background-color: #000000; text-align: left; }
div#header { margin: auto; height: 64px; background-color: #000000; text-align: center; }
div#titolo { margin: auto; height: 48px; background-color: #000000; text-align: center; }
div#spot { float: left; margin: auto; width: 700px; height: 70px; background-color: #000000; text-align: center; }
div#menu { margin: 0; float: left; width: 140px; height: 100%; text-align: center; line-height: 2,5; background-color: #000000; }
div#main { margin: 0; float: left; padding: 5px; width: 690px; height: 100%; background-color: #000000; font-family: Arial, Helvetica; font-size: 13px; text-align: justify; overflow: auto; }
div#destro { margin: 0; float: right; width: 140px; height: 100%; text-align: center; line-height: 2,5; background: #000000; overflow: auto; }
div#footer { clear: both; width: 980px; margin: 0 auto; background-color: #000000; text-align: center; font-family: Arial, Helvetica; font-size: 16px; }

@ carlomarangoni: visto il risultato del container sballato a destra, immagino occorrano i margini che dici tu, ma come faccio a definirli mi serve una larghezza fissa e centrata, che dovrei ottenere da margin: 0px auto?

[Graphic Inside]

html, body { margin: 10px auto; padding: 0; }



Non assegnare margini al body, tieni a zero. All'inizio hai messo * { padding:0; margin:0; } ? Ti semplifica un sacco di problemi.

Il resto, per ora, mi sembra corretto!

[Gas75]

Ehm, il fatto è che io voglio che il div contenitore inizi 10 px sotto il bordo superiore finestra e finisca 10 px sopra il bordo inferiore finestra... Setto quei valori direttamente nel suo css allora, vediamo che succede...

---

Succede che ora ho tutto il sito addossato a destra...
Parlo di visualizzazione con Firefox.

[Graphic Inside]

Cioè, tu vorresti che il tuo sito fosse un quadro staccato di 10px per lato?