Codici per visualizzazione corretta Layout su browser diversi

[viaggiescatti]

Ciao a tutti.
Vi scrivo per avere alcune delucidazioni e consigli riguardanti il layout del mio sito e la sua visualizzazione.
Il sito è www.viaggiescatti.altervista.org
E' da aggiornare nei contenut, ma questo conta poco.
Ciò che mi interessa è trovare una soluzione unica che rispetti la grafica visualizzata sulle singole pagine (es. HOMEPAGE) indipendentemente dal browser che viene utilizzato.
Sò che è impresa ardua, ma per lo meno vorrei che le pagine non si deformassero di molto, e soprattutto non risultassero illegibili.
Premetto che non sono un webmaster professionista. Conosco le basi del linguaggio html e dei fogli css e l'intero sito è realizzato utilizzando il classico documento di testo con foglio di stile allegato.
I div sono questi (per comodità ho inserito solo le proprietà principali) :

div#menu {
height: 28px;
vertical-align: center;
text-align: center;
padding-top: 1%;
padding-bottom: 1%;
}
div#pub {
vertical-align: center;
text-align: center;
height: 90px;
padding-top: 1%;
padding-bottom: 1%;
}
div#navigation {
width: 400px;
height: auto;
text-align: justify;
position: absolute;
top: 200px;
right: 20px;
padding: 15px;
}
div#content {
width: 700px;
height: auto;
text-align: justify;
position: absolute;
top: 200px;
right: 470px;
padding: 15px;
}

Dopo aver provato diverse combinazioni (compreso float e position relative), questa è quella che mi soddisfa di più. Almeno visualizzando il sito con Chrome e Firefox.
Su IE cambia parecchio, ma tutto sommato è leggibile.
Su smartphone fa schifo. la grafica risulta tagliata a sinistra.
Cosa mi consigliate di utilizzare come metodo per poter avere un layout stabile e simile a quello visualizzato con google chrome?
Vorrei evitare di utilizzare i tag delle tabelle direttamente sul foglio html. Sarebbe come tornare indietro e comunque a mio parere poco gestibile.
Secondo voi ho sbagliato qualche codice?
E' meglio utilizzare le percentuali per definire altezza, larghezza e padding?
Mi interesserebbe anche che i vari box e le informazioni ricevute al loro interno non si deformassero in base alla grandezza della finestra. Preferisco che si crei una barra di scorrimento.
Ringrazio tutti in anticipo per il consigli!

[NLSweb]

Allora.. ci sono un po' mdi errori di sintassi nel CSS ..
ad esempio : Error in parsing value for 'vertical-align'. Declaration dropped.

ho visto che scrivi : vertical-align: center;
forse intendevi : vertical-align:middle;

comunque dovresti vedere qui qualche esempio

Su smartphone fa schifo. la grafica risulta tagliata a sinistra.

il fatto e' che definisci una position absolute con right , cio' significa che gli elementi partiranno da destra verso sinistra ed in una finestra piccola verranno tagliati a sinistra..... poiche' lo scrolling orizzontale parte da sinistra verso destra...
se infatti metessi come impostazione left invece che right , potresti usare lo scroll quando la finestra e' troppo piccola per visualizzare tutto.

E' meglio utilizzare le percentuali per definire altezza, larghezza e padding?
...
Mi interesserebbe anche che i vari box e le informazioni ricevute al loro interno non si deformassero in base alla grandezza della finestra. Preferisco che si crei una barra di scorrimento.

Le percentuali per definire la dimensione degli elementi , inevitabilmente modificano la dimensione in base alla grandezza della finestra
esempio : in una finestra di 1024x768 un elemento che avra' width:10% e height:10% avra' come dimensione 102px per 76px
Quindi se non vuoi che si "deformino" devi usare delle misure costanti !

il padding .. crea un area intorno all'elemento (tra l'elemento e il suo bordo)


quindi se lo usi in % , in base alla dimensione dell'elemento avra' piu' o meno spazio
se vuoi definire uno spazio fisso allora e' meglio definirlo (px, pt, cm, ....)

[viaggiescatti]

Ho letto tutto. Grazie mille per le dritte!
Ho inserito la position absolute partendo da sinistra e in effetti sullo smatphone non viene tagliato più nulla.
Inoltro è molto interessante il link per correggere i codici css.
Come dicevo sono poco esperto e su qualcosa devo ancora "specializzarmi" :-)