Hi this is how we can create a website that looks like this

whoa the image is so big

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* -------------------- css reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
body {
	line-height: 1;
ol, ul {
	list-style: none;
blockquote, q {
	quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
table {
	border-collapse: collapse;
	border-spacing: 0;

/* -------------------- global */

html, body {
	background-color: #ccc;

#website-wrap {
	width: 920px; /* will be 960px after we add 20px side padding */
	margin: 0 auto; /* auto will aligned the element in the center */
	padding: 20px; /* 20px left + 20px right + 920px content area = 960px */
	background-color: #999;

#header, #left-sidebar, #main-content, #right-sidebar, #column1, #column2, #column3, #column4 {
	background-color: #333;

.clear {
	clear: both;

p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 14px;
	color: #fff;
	text-align: center;
	padding-top: 20px;
	text-transform: uppercase;

/* -------------------- header */

#header {
	height: 50px;

/* -------------------- content */

#content {
	margin-top: 20px;

#left-sidebar {
	float: left;
	width: 160px;
	height: 200px;
	margin-right: 20px;

#main-content {
	float: left;
	width: 560px;
	height: 300px;

#right-sidebar {
	float: right;
	width: 160px;
	height: 200px;

/* -------------------- footer */

#footer {
	margin-top: 20px;

#column1, #column2, #column3, #column4 {
	float: left;
	width: 215px;
	height: 100px;
	margin-right: 20px;

div#column4 { /* this type of selector ensures it has higher specificity value that element selector */
	margin-right: 0;

	<div id="website-wrap">
    	<div id="header">
        </div><!-- end #header -->
        <div id="content">
        	<div id="left-sidebar">
            	<p>left sidebar</p>
            </div><!-- end #left-sidebar -->
            <div id="main-content">
            	<p>main content</p>
            </div><!-- end #main-content -->
            <div id="right-sidebar">
            	<p>right sidebar</p>
            </div><!-- end #right-sidebar -->
            <br class="clear />"
        </div><!-- end #content -->
        <div id="footer">
        	<div id="column1">
            	<p>column 1</p>
            </div><!-- end #column1 -->
            <div id="column2">
            	<p>column 2</p>
            </div><!-- end #column2 -->
            <div id="column3">
            	<p>column 3</p>
            </div><!-- end #column3 -->
            <div id="column4">
            	<p>column 4</p>
            </div><!-- end #column4 -->
            <br class="clear />"
        </div><!-- end #footer -->
    </div><!-- end #website-wrap -->
Hope you guys can catch up! Ask me if there's anything confusing