Bueno, ultimamente e visto que muchas personas tienen dudas sobre como maquetear un layout con CSS o me han preguntado directamente, bueno ahora les explicare un poco.

Lo que haremos sera exactamente la siguiente imagen pero estructurada con xHTML/CSS



Bueno, primero empezaremos creando el contenedor principal con un #web-content

HTML:
<div id="web-container">Contenido</div>CSS:
#web-container{
    width:960px;
    margin:0 auto;
}
Demasiado sencillo, esto nos centrara el div y le dará nuestro ancho deseado, lo siguiente seria agregar un header, no tiene nada de ciencia ya que el header no tendra divisiones muy complicadas por ahora y al css solo le daremos el alto deseado.

HTML:
<div id="web-container">
    <div id="header">
        Header
    </div>
</div>
CSS:
#header{
    width:960px;
    height:120px;
}
Lo siguiente seria hacer nuestro costado y contenido prinicipal, aquí es donde tenemos que tener cuidado a la hora de sacar nuestras matematicas, por ejemplo si queremos que nuestro costado mida 200px, entonces tendremos que tener (#web-content)-(aside) = (main-content) (Notese la patética expresión algebraica que se uso para este ejemplo) Por tanto tendremos 960-200=760 que sera la medida de nuestro contenido principal.

HTML:
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>
CSS:
#aside{
    width:260px;
    float:left;
}
#main-content{
    width:700px;
    float:left;
}
Listo ahora tenemos la primera parte y agreguemos unos colores de borde para tener un ejemplo de como nuestro layout esta representado.

Este seria nuestro HTML terminado.
<div id="web-container">
    <div id="header">
        Header
    </div>
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>
</div>
Y este nuestro CSS.
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
}
#header{
    width:960px;
    height:120px;
    border:1px solid #900;
}
#aside{
    width:260px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:700px;
    float:left;
    border:1px solid #F60;
}
¡HEY ATENTO!
Recuerda que la suma de todo el ancho debe de ser 960px (Tamaño del div contenedor) y saquemos esta cuenta, 700+260=960 pero como tenemos un border esto nos agrega un 1px mas de cada lado por tanto 700+260+1+1+1+1=964 así que restemos 2px de cada uno.

CSS:
#header{
    width:958px;
    height:120px;
    border:1px solid #900;
}
#aside{
    width:258px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:698px;
    float:left;
    border:1px solid #F60;
}

Listo ya aprendimos un poco sobre como maquetar un layout

clear:both;
Seguramente has escuchado a alguien decirte agregale un clear:both; antes de cerrar la carpeta contenedora y servirá. Si no lo has escuchado, lo acabas de escuchar y aprenderte muy bien esto, te puede ahorrar muchos dolores de cabeza.

Esta función básicamente lo que hace es "estirar" la div contenedora hasta el final para mostrar las propiedades de esta, ya que si intentamos de otra forma, no lo hara. Así que usaremos clear:both; para estos casos.

Paddings.

Ahora bien, los paddings nos sirven para agregar un espacio entre el borde de cualquier contenedor entre el contenido (Esto se leyó *****o, lo se), por ejemplo si nosotros tenemos un div y le agregamos un padding de 20px el contenido se mostrara 20px mas hacia abajo, derecha, izquierda y arriba y si solo queremos agregar un padding a una parte usaremos padding-top, padding-left, padding-right, padding-bottom creo que ya deben de estar familiarizado con esto, así que agreguemos paddings a nuestro layout.

CSS:
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
    padding:10px;
}
Nota: Si tenemos un ancho de 960px y un padding de 10px el padding se agregara a los dos costados también por ende sera un 20px en total y nuestro width total sera de 980px ahora.

Solo agregaremos padding a nuestro web-container por que nuestro aside y main-content usaremos margin para separarlos.

Margin.
Margin es básicamente igual que padding solo que en lugar de agregar hacia adentro lo agrega hacia afuera. ( Si tienes dudas con esto no dudes en preguntármelo).

Ahora para implementarlo en nuestro layout haremos un pequeño truco, solo le agregaremos el margin al header para que se separe de nuestro contenido y al main-content para que se separe del aside, claro de sus respectivos lados.

#header{
    width:958px;
    height:120px;   
    border:1px solid #900;
    margin-bottom:10px;
}
#main-content{
width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
float:left;
border:1px solid #F60;
margin-left:10px;/*Tendremos que restarle este 10px a width*/
}

Listo ya sabemos lo mas básico ahora te toca a ti ponerlo en practica pero echemos un ultimo vistazo a todo nuestro layout terminado.

HTML:
<div id="web-container">
    <div id="header">
        Header
    </div>
    <div id="aside">
        Aside
    </div>
    <div id="main-content">
        Main Content
    </div>
    <div class="clear"></div>
</div>
CSS:
#web-container{
    width:960px;
    margin:0 auto;
    border:1px solid #000;
    padding:10px;
}
#header{
    width:958px;
    height:120px;   
    border:1px solid #900;
    margin-bottom:10px;
}
#aside{
    width:258px;
    float:left;
    border:1px solid #6F3;
}
#main-content{
    width:688px;/*width:698px; y si restamos los 10px del margin seran 688px;*/
    float:left;
    border:1px solid #F60;
    margin-left:10px;/*Tendremos que restarle este 10px a width*/
}
.clear{clear:both;}
Bueno espero que les sirva aunque sea un poco, lo hice a las 00:17 de la madrugada así que cualquier anomalía favor de reportarla, próximamente les estaré explicando cosas un poco mas complicadas.

Saludos a todos.

Los bordes agregan pixeles solo en IE (que raro...), o al menos eso tengo entendido.

Muy buen tutorial

mOrk sea es la idea que tengamos las bases para poder hacer lo que deseemos. West firefox tambien los agrega o eso supongo por que siempre que diseno lo hace xd. Kevin esa es la idea de dejemosos 90's arras y empezemos con dissents tableless. Disculpas por las faltas estoy en la escuela con el iPhone. Y gracias por sus buenos comentarios y karmas

Buen tutorial, aunque ya lo sabía, cada vez que hago mis diseños en photoshop y lo pasó a CSS siempre verifico que este de acuerdo a los estándares de la W3C.

Buen tutorial, aunque ya lo sabía, cada vez que hago mis diseños en photoshop y lo pasó a CSS siempre verifico que este de acuerdo a los estándares de la W3C.

Si, imagino eres un disenador web experimentado por eso dejemosles este tutorial a Los mas novatos en la materia.

Ratrillox: siempre se aprende algo nuevo.

Muchas gracias me servirá para mis webs...
K+

Gracias Edwin.

Si quieren saber algo que les interese haganme saber y yo hago un tutorial acerca de eso. ;D!

Ahora que lo reviso, el width:960px; del header sobra, no hace falta puesto que si no lo pones, ocupa el 100% de su espacio, que son los 960px del contenedor. Se puede ahorrar esa línea.

Y después en el apartado del padding dices que el contenedor de toda la estructura ya no sería 960px, sino 980px. Eso es incorrecto, como dices, el padding es espacio interior y el margin exteriror, por lo que dentro del contenedor nos quedarían 940px.

Saludos!

1.- El width del header lo puse para hacer un poco mas claro el tutorial,  ya que muchos no les puede quedar claro este punto.

2.- Yo me refiero en ese punto a la estructura que estamos formando no a la del contenedor. El Padding nos agrega los pixeles al width.

Nota: Si tenemos un ancho de 960px y un padding de 10px el padding se agregara a los dos costados también por ende sera un 20px en total y nuestro width total sera de 980px ahora.

mOrk prueba algo, a una div tu dale un valor al width de 20px y agregale un padding:500px; y dime si se agregan pixeles al width usemos un border para comprobar