Saludos,
No tengo tiempo para "montar" un tutorial, pero de cualquier modo, este tema servirá de referencia para los que preguntan lo mismo que vos.
Primero el código y después lo explico (aunque está tan simple que ni vale la pena explicarlo).
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo de sitio a Pantalla Completa</title>
<meta name="generator" content="Cristalab WebCoder" />
<meta http-equiv="author" content="Pedro || http://www.xtandard.com" />
<style type="text/css" media="screen">
<!--
body {
margin: 0px auto;
padding: 0px;
text-align: center;
font-size: 12px;
font-family: Tahoma, verdana, arial, sans-serif; color: #333;
}
#contenedor {
margin: 0px auto;
padding: 10px;
text-align: left;
}
#header {
width: 100%;
height: 50px;
background-color: #0072BF;
color: #ff3;
}
#cuerpo {
width: 100%;
background-color: #ffc;
}
#pie {
width: 100%;
height: 35px;
color: #fff;
background-color: #000;
}
-->
</style>
</head>
<body>
<div id="contenedor">
<div id="header">Aquí tu encabezado</div>
<div id="cuerpo">
<h1>Título</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<h2>Subtítulo</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="pie">Aquí el pie y los copyright, etc.</div>
</div>
</body>
</html>Este es el
ejemplo ya en línea.
Recuerda:
1.- div es una división en tu código, una parte, una sección (lo que algunos llaman capas).
2.- id (identificador) hace que se relacione ese div con el código de la hoja de estilo o css.
3.- En XHTML, la etiqueta se abre, DEBE cerrarse, así que no seas perezoso, sino no sirve.
4.- style es la tag dentro de la que escribirás todo el estilo (que en este caso por la prisa y para efectos de simple entendimiento, puse en el mismo html, pero lo correcto es importarlo con la tag link, desde su propio archivo css que puede estar en cualquier directorio del server, obviamente bien direccionado) .
5.- comentamos el estilo por aquello de los navegadores viejos que no lo soportan, así si el agente de usuario es demasiado viejo, simplemente lo ignorará por estar comentado.
6.- body, pues body es parte fundamental de todo documento para la web. En él te asegurarás de indicar los márgenes y padding (margen es la distancia entre él y el elemento padre en la estructura; padding es la distancia que puede haber entre el borde del elemento y su contenido... sino entiendes, busca en google, allí hay info suficiente, pero ahora mismo no ando tiempo).
7.- Definimos un tamaño y familia específico paora el documento (aunque esto se puede reescribir para cada parte y elemento, en su momento por aquello de la espcificidad).
8.- Luego damos estilo a cada "div" o parte de nuestro documento (color de fondo, ancho, etc).
9.- El truco del ancho variable está en el div contenedor como ves, está centrado (margin: 0px auto; padding: 10px;) y le estas diciendo al navegador que todo lo que esté dentro de "contenedor" tendrá un margen igual a 0 (en relación al body, que a su vez tiene un valor igual a cero en relación con el navegador).
10.- Si quisieras que tu sitio tenga una anchura como clab -por ejemplo- sólo debes asignarle valores específicos a margin (tope, derecha, fondo e izquierda, debe ser en ses orden).
11.- Como habrás notado, le dejé un padding de 10px para que las letras y resto del contenido no parte directamente de la orilla del navegador, pero tu puedes jugar con esos valores.
12.- Los h1 y h2 són headers o títulos (van desde h1, h2.... hasta h6, según el tamaño que desees y así mantienes uniforme tu estilo, que es la idea de CSS).
13.- Es CASI lógico que los <p> són párrafos...
14.- los h y los p tienen márgenes y padding predeterminados según el navegador, pero también los puedes modificar... así que a trabajar huevones (perezosos)!!!
Hay más tela que cortar con este SIMPLE código, pero será historia para otro día.
Este documento es BÁSICO Y SIMPLE, no implica posicionamiento, para eso, puedes ver el tuto de ramm (que explica el posiciomamiento).
Éxito!
P.D. Quizá algún día prepare un tuto, sino aquí queda esta referencia.
y no queria cometer el error...mas bien queria que me guiasen ...si no es mucho pedir 
