site em html/css se adaptar em varias resoluções

olá pessoal tudo beleza???

eu preciso de ajuda no meu site eu estava fazendo meu site no photoshop e usava tabelas para apresentar normal acho q vcs sabem como fazer mas apresentava varios erros de incompatibilidade entao eu dei uma lida nos artigos de Tableless e gostei muito pq você usa html como se deve usar e css para aplicar os efeitos no seu site entao foi o que fiz ou pelo menos tentei fazer meu site é simples tem topo, corpo e rodapé uso divs para cada parte para os textos uso paragrafo, H's, span etc axo que esta correto meu css é externo, bom enfim vamos a duvida.

Quando fazia esse site eu testava nos brawser ie, fox,moz e netscape a resolução de minha tela é 1280X1024. Nessas condiçoes meu site só fica correto no ie nos demais o rodapé fica com um espaço em branco embaixo parece que o rodapé subiu pra cima mas ele esta onde é para estar só não queria que esse espaço ficasse.

1° como posso arruma-lo?

veja o css:

/ CSS Document /
*{

margin:0px;
padding:0px;

}

body{

	font-family:"sans-serif",Helvetica,Arial;
	color:#798893;
	font-size:12px;
	background: url(images/fundo.jpg) no-repeat center center;
 text-align:center; /* hack para o IE para não dar erro na centralização do site*/
	}
.container{
	height:100%;
	width:100%;
	margin:0 auto;
 text-align:left;/*"remédio" para o hack do IE */
}

.box{
 width:980px;
	margin-left:9%;
	margin-top:1%;

	}

.box span.bordatopo{

	display:block;
	height:30px;
}

.box span.bordatopo{

 background: url(images/bordatopo.png) no-repeat center top;

}

.conteudo{
	background: #8AA4BB;
 width:980px;
	margin-top:-5px;
}

.conteudo a{

text-decoration:none;
color:#ffffff;
cursor:pointer;
}

.flash{
	margin-left:9%;
	background-color:#2d6aa9;
	height:310px;
	width:980px;
	opacity:.50;
	filter:alpha(opacity=50);
	position:relative;
	}

h2{

	color:#ffffff;
	margin-left:60%;;
	font-family: Helvetica;
	font-size: 18px;
}

/----titulos dos aparelhos principais----------------------------------------------/

.title{
	color:#25a7cc;
	font-family:"sans-serif";
	font-size: 12px;
}

.title h1.pixel{

	margin-top:2%;
	margin-left:16%;
	position:absolute;
}

.title h1.accent{

	margin-top:2%;
	margin-left:36%;
	position:absolute;
}

.title h1.harmony{

	margin-top:2%;
	margin-left:56%;
	position:absolute;
}

.title h1.light{

	margin-top:2%;
	margin-left:76%;
	position:absolute;
}

sup.super{

 font-size:10px;

}

/----1box azul com a imagen----------------------------------------------/

.box2{
	width:235px;
	margin-left:8%;
	margin-top:5%;
	position:absolute;
	}

.box2 span.boxtopo2, .box2 span.boxbase2{

	display:block;
	height:11px;
}

.box2 span.boxtopo2{

 background: url(images/boxtopop.png) no-repeat center top;

}

.box2 span.boxbase2{

 background: url(images/boxbasep.png) no-repeat center bottom;

}

.conteudo2{
 background:#e5ebf0;
 width:205px;
	margin-top:0%;
	margin-left:14px;

	}

.conteudo2 span.image{

 height:212px;
 margin-left:-8px;

}

.conteudo2 b.link{

	font-size:12px;
	color:#5ba7f5;
	margin-left:35%;
	position: relative;
}

/----2box azul com a imagen--------------------------------------------------/

.box3{
	width:235px;
	margin-left:30%;
	margin-top:5%;
	position:absolute;

	}

.box3 span.boxtopo3, .box3 span.boxbase3{

	display:block;
	height:11px;
}

.box3 span.boxtopo3{

 background: url(images/boxtopop.png) no-repeat center top;

}

.box3 span.boxbase3{

 background: url(images/boxbasep.png) no-repeat center bottom;

}

.conteudo3{

 background:#e5ebf0;
 width:205px;
	margin-left:14px;

}

.conteudo3 span.image2{

 height:212px;
 margin-left:-8px;

}

.conteudo3 b.link{

	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
}

/----4box azul com a imagen--------------------------------------------------/

.box4{
	width:235px;
	margin-left:52%;
	margin-top:5%;
	position:absolute;
	}

.box4 span.boxtopo4, .box4 span.boxbase4{

	display:block;
	height:11px;
}

.box4 span.boxtopo4{

 background: url(images/boxtopop.png) no-repeat center top;

}

.box4 span.boxbase4{

 background: url(images/boxbasep.png) no-repeat center bottom;

}

.conteudo4{

 background:#e5ebf0;
 width:205px;
	margin-left:14px;

}

.conteudo4 span.image3{

 height:212px;
 margin-left:4%;

}

.conteudo4 b.link{

	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
}

/----5box azul com a imagen--------------------------------------------------/

.box5{
	width:234px;
	margin-left:74%;
	margin-top:5%;
	position:absolute;
	}

.box5 span.boxtopo5, .box5 span.boxbase5{

	display:block;
	height:11px;
}

.box5 span.boxtopo5{

 background: url(images/boxtopop.png) no-repeat center top;

}

.box5 span.boxbase5{

 background: url(images/boxbasep.png) no-repeat center bottom;

}

.conteudo5{
 background:#e5ebf0;
 width:205px;
	margin-left:13px;

}

.conteudo5 span.image4{

 height:212px;
 margin-left:5%;

}

.conteudo5 b.link{

	font-size:12px;
	color:#5ba7f5;
	margin-left:42%;
	position:relative;
}

b.link a{

	text-decoration:none;
	margin-left:-2%;
	color:#5ba7f5;
	position:relative;
 }

/---divisoes---------------------------------------------------/
span.div1{

 width:33px;
 height:326px;
 margin-left:28%;
 margin-top:2%;
 position:absolute;
}

span.div2{

 width:33px;
 height:326px;
 margin-left:49%;
 margin-top:2%;
 position:absolute;
}

span.div3{

 width:33px;
 height:326px;
 margin-left:71%;
 margin-top:2%;
 position:absolute;
}

/------rodapé------------------------------------------------------------/

.base{
	margin-top:30%;
	display: block;
 background-color:#b9bfbe;
	height:100px;
	padding-bottom:5px;
	width:100%;
	opacity:.70;
	filter:alpha(opacity=70);
	position: relative;
 }

.base span.div{

	color:#666;
	margin-left:8%;
	font-size:12px;
	position:relative;
}

/-----logo effcom endereço calllaser------------------------------------------------------------------/
.base span.end{

	color:#333;
	margin-left:5%;
	position:relative;
	}

.base span.effcom{

	margin-left:88%;
	position:relative;
}

.base span.makpubli{

	color:#000;
	font-family:"Arial";
	font-size:7px;
	margin-left:88%;
}

e o html

<html>
<head>
<title>Call Laser Locações</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<br><br><div class="container">

<!-- --topo----------------------------------------------------------------------------------------------->

<div class="box"><!-- abre box azul com menu-->
<span class="bordatopo"></span>
<div class="conteudo">
 <h2><a href="index.html" target="" >Home</a> | <a href="quemsomos.html" target="" >Quem somos</a> | <a href="serviços" target="" >Serviços</a> | <a href="contatos" target="">Contato</a></h2><br></div>
</div><!-- fecha box azul com menu-->

<div class="flash"><!-- abre o banner-->

o flash vai aqui </div><!-- fecha o banner--> <!-- --------------conteudo----------------------------------------------------------------------------------->

<div class="title"><!-- titulos -->
<h1 class="pixel">PIXEL<sup class="super">CO2</sup></h1><h1 class="accent">ACCENT<sup class="super">XL</sup></h1>
<h1 class="harmony">HARMONY<sup class="super">XL</sup></h1><h1 class="light">LIGHT SHEER</h1>
</div><!-- fecha o titulo-->

<div class="box2"><!-- abre o box azuis pequenos com imagens links de cada um-->
<span class="boxtopo2"></span>
<div class="conteudo2"><span class="image"><img src="images/pixel_co2_n.gif" alt=""></span><b class="link"><a href="pag1.html" target="">Ver detalhes</a></b></div>
<span class="boxbase2"></span>
</div>

<div class="box3">
<span class="boxtopo3"></span>
<div class="conteudo3"><span class="image2"><img src="images/accent_xl.gif" alt=""></span><b class="link"><a href="pag2.html" target="">Ver detalhes</a></b></div>
<span class="boxbase3"></span>
</div>

<div class="box4">
<span class="boxtopo4"></span>
<div class="conteudo4"><span class="image3"><img src="images/xeo.gif" alt=""></span><b class="link"><a href="pag3.html" target="">Ver detalhes</a></b></div>
<span class="boxbase4"></span>
</div>

<div class="box5">
<span class="boxtopo5"></span>
<div class="conteudo5"><span class="image4"><img src="images/light.gif" alt=""></span><b class="link"><a href="pag4.html" target="">Ver detalhes</a></b></div>
<span class="boxbase5"></span>
</div><!-- fecha o box azuis pequenos-->

<div class="div"><!-- abre divisoes-->
<span class="div1"><img src="images/div.gif" alt=""></span>
<span class="div2"><img src="images/div.gif" alt=""></span>
<span class="div3"><img src="images/div.gif" alt=""></span>
</div><!--fecha divisoes-->

<!-- --------------------base--------------------------------------------------------------------------- -->

<div class="base"><!-- -------------abre rodapé---------------------------------------------------------- -->
<br>
<span class="end">Rua: Benjamin Constant, 808 - Ourinhos - SP - CEP 19900-231 Fone:(14) 3322-2808 / Fone/Fax:(14) 3322-1059</span><br>
<span class="div">............................................................................................................................................................................................................................................................................................................................................</span>
<span class="effcom"><img src="images/effcom.gif" alt=""><span class="makpubli">Marketing & Publicidade</span></span>
</div>
</div>
</body>
</html>

2- como tinha dito eu fiz com base nessa resolução de tela 1280X1024 mas qd eu abri ele em outra tela witscreen o site fica msm tamanho até o rodapé fica normal sem um espaço em baixo branco só que ele passa a ter um espaço nas laterais sinistro!!!

o site fica no lugar mas surge um espaço branco do lado direito ai aparece barra de rolagem e tudo.

Como arrumo isso? Preciso que ele fique se adapte em qualquer resolução.

veja que o index.html tem uma div que recebe o conteudo todo msm assim não funcionou colocando isso...

3- falando em rodapé repare que ele esta com transparencia consegui coloca-la sem que o conteudo dessa div ficasse transparente tb só que isso só funcionou no ie como faço para que nos outros brawsers o conteudo não fique transparente tb. já tentei colocar imagem mas não consegui direito pq o ie ficava errado se não tiver soluçao e a imagem for a unica soluçao me esplique por favor a maneira correta

repito que meu css é EXTERNO prefiro para o caso de surgir possiveis erros

Agradeço a atençao e espero que alguem por favor me ajude com essas duvidas pq até agora não acertei um site.... :(