Home page non si vede bene su smartphone

[Gas75]

Salve,
ho avuto modo di testare il mio sito con uno smartphone, verificando che si vede correttamente, tranne l'home page, che viene "tagliata" lateralmente...

Il css è questo...

html
{ padding: 0; }
body
{ padding: 0; font-family: Arial, Helvetica; background-color: #408080;
color: #ffffff; text-align: center; }
p, table
{ color: #ffffff; font-size: 10px; }
input
{ font-family: Arial, Helvetica; font-size: 13px; }
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
{ width: 980px; height: 582px; text-align: left; position: absolute;
top: 50%; left: 50%; margin-top: -291px; margin-left: -490px; }
div#header
{ height: 112px; font-size: 13px; background-color: #000000;
text-align: center; }
div#menu
{ float: left; width: 140px; height: 470px; text-align: center;
background-color: #000000; }
div#main
{ float: left; width: 700px; }
div#content
{ float: left; width: 408px; height: 146px; text-align: center; }
div#content2
{ float: left; width: 408px; height: 234px; background: #000000;
text-align: center; font-size: 10px; }
div#harlan
{ float: right; width: 292px; }
div#edicola
{ float: right; width: 140px; height: 470px; text-align: center;
background: #000000; }
#menu a, #edicola a
{ display:block; margin-bottom: 10px; font-size: 10px;
text-align: center; }
div#footer
{ width: 700px; margin: 0 auto; padding-top: 5px;
background-color: #000000; text-align: center; font-size: 13px; }
div#footersx
{ float: left; width: 50%; height: 90px; background-color: #000000;
text-align: center; }
div#footerdx
{ float: left; width: 50%; height: 90px; background-color: #000000;
text-align: center; }

Come posso correggere affinché si visualizzi bene anche su smathphone e altri supporti mobili?

[ResianTaxidrive]

mah il div#container di questa larghezza width: 980px mi sembra limitante. Ci sono anche altri contenitori che hanno la larghezza espressa in pixel.
Ti conviene settare le larghezze in % anzichè in px.

[Gas75]

In percentuale il container si "deforma" al cambiare della risoluzione...

Inoltre non capisco perché il display dello smartphone, se rimpicciolisco, lascia i due div laterali tagliati invece di visualizzarli, mentre nelle pagine interne, anch'esse con container da 980px, si vede tutto bene (ma con un altro foglio di stile).