Box centrato e barre di scorrimento

[MAeSI]

Ciao,
senza toccare la tua struttura HTML, potresti provare a fare queste modifiche:

Nel codice HTML hai un div con classe container, non con id container come hai invece dichiarato nel CSS, correggila.

Prova a dare position:relative al div.container e togliere position:absolute al div.content. Così ottieni la centratura del box in orizzontale.

Per la barra di scroll, prova ad assegnare al div.container un'altezza 100%.

[mlolcu]

Ciao,
senza toccare la tua struttura HTML, potresti provare a fare queste modifiche:

Nel codice HTML hai un div con classe container, non con id container come hai invece dichiarato nel CSS, correggila.

Prova a dare position:relative al div.container e togliere position:absolute al div.content. Così ottieni la centratura del box in orizzontale.

Per la barra di scroll, prova ad assegnare al div.container un'altezza 100%.

Ciao e grazie per l'attenzione.
Spero di aver seguito bene le tue indicazioni, ho modificato il foglio CSS ed è andato tutto a posto

.container{
    height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
}

.content{
    margin: 0 auto; 
    width: 770px;
    overflow:auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 0;
    border-right: 0;
    padding-top: 20px;
    padding-bottom: 100px;
    font: 10px Verdana, Arial;
    background: rgba(255,255,255,0.25);
}

Grazie ancora per la pazienza!

[mlolcu]

Scusa, ho una curiosità.
Io stò impostando il box che contiene il testo per una larghezza di 1024px, mi sono preparato un'immagine di riferimento larga 1024px, ma per avere il box largo 1024px devo impostare la classe Content ad una larghezza complessiva di 820px.
Perchè questa discrepanza? 820px non sono 1024?
Preciso che stò utilizzando FireFox senza zoom (Ctrl+0), se però guardo Chrome nella stessa condizione trovo tutti i caratteri più piccoli. Qual'è il browser giusto da considerare?

.content{
margin: 0 auto;
width: 760px;
overflow:auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 100px;
border-left: 0;
border-right: 0;
font: 10px Verdana, Arial;
background: rgba(255,255,255,0.25);
}

[MAeSI]

Perchè questa discrepanza? 820px non sono 1024?

Certo che no, ma credo di non aver capito bene a cosa ti serve un'immagine di riferimento.

Preciso che stò utilizzando FireFox senza zoom (Ctrl+0), se però guardo Chrome nella stessa condizione trovo tutti i caratteri più piccoli.

Se linki un esempio, forse si riesce a capire di più.

Qual'è il browser giusto da considerare?

Tutti

[mlolcu]

Ciao,
l'esempio è gia nel codice che ho postato e mi riferisco al box Content che conterrà il testo la cui larghezza è 30+760+30. L'immagine di riferimento è semplicemente un rettangolo rosso largo 1024 per verificare come si presenta il sito quando il browser è largo come il rettangolo. Ma ripensandoci credo di aver capito che sebbene 820 sembri largo 1024 su FireFox, in fondo tutto dipende da come il browser renderizza i font e dal livello di zoom. Quindi il lavoro che stò facendo è inutile, basta impostare il box con una larghezza ad esempio di 964 più due padding laterali di 30 per avere un box effettivamente largo 1024. Poi a seconda del browser e dello zoom sarà tutto più o meno largo.
E' così?
Grazie ancora per la pazienza