posicionamento das divs todo errado!

Oi gente!

Tô tentando configurar um layout, mas estou com vários problemas que nunca tive antes, e não consigo resolver.

1. preciso colar a div "page" no topo, mas ela não fica de jeito nenhum.

2. posicionei todas as divs e elas estão, aparentemente, corretas na visualização do Dreamweaver. Quando jogo no browser pra verificar, está um caos.

Enfim, o que era pra ser algo simples está mega complexo (tô até me sentindo completamente noob).

O layout precisa ficar assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://drainedofcolours.com/rodadegaia/preview.jpg&key=f86ad6e3cd5c8871fedaf0e9c90390a0be82341ef27e1ba176c57c17474ef974" alt="Imagem Postada" />

Mas atualmente ele está assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://drainedofcolours.com/rodadegaia/browser.jpg&key=818cc44b20247d88cb2455b9c6505f3c2f72286339e233808514ebb6030bc6d3" alt="Imagem Postada" />

Eis o código:

@charset "utf-8";
/ CSS Document /

body
{

	width: 100%;
	margin: 0px;
	background: #d54709 url(imgs/back2.jpg) fixed top;
	padding: 0px 0px 0px 20px;
	}
#page
 {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 960px;
	position:relative;
	top: 0;
 }
#header
 {
 height: 180px;
 width: 960px;
 text-align: center;
 padding: 0px;
 }
#headerimg
 {
 background: url(imgs/logo.png) no-repeat top left;
 margin: 0px;
 text-align: left;
 height: 180px;
 width: 260px;
 float: left;
 }
#menu
 {
	background-image:url(imgs/box_menu.png);
	background-repeat:no-repeat;
	background-position: 253px;
	position:relative;
	top: 20%;
	height: 104px;
	width: 885px;
	padding-left: 260px;
	text-align: left;
 }
 #sidebar
 {
	clear:both;
	padding: 0px 20px;
	text-align: left;
	width: 190px;
	position:relative;
	top: 0%;
	left: 1%;
	float: left;
 }
#mensageiro
	{
	background-color:#35270D;
	width: 190px;
	height: 110px;
	}
#dica
	{
	background-color:#35270D;
	width: 190px;
	position:relative;
	top: 20px;
	}
#twitter
	{
	background-color:#35270D;
	width: 190px;
	height: 290px;
	position: relative;
	top: 40px;
	}
#content
 {
	background: url(imgs/content.png) repeat-y top;
	background-position:left;
	float: left;
	position:absolute;
	left: 30%;
	top: 80%;
	text-align: left;
	width: 1108px;

 }
#post
 {
 float: left;
 padding: 30px 30px 30px 30px;
 width: 580px;
 }

#footer
 {
 background:#F00;
 height: 25px;
 text-align: left;
 width: 580px;
 float:left;
 position:relative;
 left: 30%;
 padding: 5px;

 }

Só complementando: estou tentando programar pra funcionar em resoluções diferentes, de um jeito que haja uma área visível a todas, e partes que só sejam visíveis em resoluções maiores/wide, pra não ficar um espaço vazio...tipo esse site aqui: http://www.mattdempsey.com/

É isso...obrigada desde já! =)