Esempio (ho inserito solo la prima parte dei contenuti, il css è nella pagina per mia comodità, ma è da portare fuori):

codice:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
}
body {
  background-color:#4d4d4d;
}
#main {
	width: 1260px;
	margin:0 auto;
	background-color:#FF99FF /* da rimuovere, serve per colorare a destra e sinistra lo spazio corrispondente alle colonne laterali */
}
#left {
	float:left;
	width: 140px;
}

#right {
	float:right;
	width: 140px;
}
#rightContent, #leftContent{
	padding:5px;
}
#content {
	width: 950px;
	padding:0 15px;
	float:left;
	background-color:#4d4d4d;
}
#footer {
  clear:both;
	width:100%;
  background-color:#333;
	color:#ccc;
  height:50px;
  line-height:50px;
	text-align:center;
}
#masthead {
	width:950px;
  height:121px;
}
#masthead h1 {
  float:left;
  width:382px;
  height:121px;
  background:url(logo.png) no-repeat 0 0;
  text-indent:-9999px;
}
#masthead h1 a {
  display:block;
  width:100%;
  height:100%;
  background:url(logo.png) no-repeat 0 0;
  outline:none;
}
#masthead ul {
  float:left;
  width:566px;
  height:121px;
  list-style:none;
  background:url(nav-sprite.png) no-repeat 0 0;
}
#masthead ul li {
  display:block;
  height:121px;
  float:left;
}
#home {
  width:115px;
}
#portfolio {
  width:160px;
}
#services {
  width:144px;
}
#contact {
  width:147px;
}
#masthead ul li a {
  display:block;
  width:100%;
  height:100%;
  text-indent:-9999px;
  outline:none;
}
li#home a:hover {
  background:url(nav-sprite.png) no-repeat 0 -121px;
}
li#portfolio a:hover {
  background:url(nav-sprite.png) no-repeat -115px -121px;
}
li#services a:hover {
  background:url(nav-sprite.png) no-repeat -275px -121px;
}
li#contact a:hover {
  background:url(nav-sprite.png) no-repeat -419px -121px;
}
#featured-area {
	width:950px;
  height:304px;
  background:url(bg-featured.jpg) no-repeat 0 0;
}
#description {
  width:455px;
  margin:55px 0 55px 20px;
  float:left;
}
#description p {
  font:bold 30px/32px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  color:#fff;
}
#preview {
  width:445px;
  margin:55px 20px 55px 0;
  float:right;
}
-->
</style>
</head>

<body>
<div id="main">
  <div id="left">
    <div id="leftContent">CONTENUTI COLONNA SINISTRA</div>
  </div>
  <div id="content">
    <div id="masthead">
      <h1>Portfolio Web Design</h1>
      <ul>
        <li id="home">Home
        <li id="portfolio">Portfolio
        <li id="services">Dove siamo
	<li id="contact">Contatti[/list]
    </div>
    <div id="featured-area">
      <div id="description">
        

Queste sono solo alcune realizzazioni.</p>
      </div>
	<div id="preview"> [img]images/sample-preview.jpg[/img] </div>
    </div>
  </div>

  <div id="right">
    <div id="rightContent">CONTENUTI COLONNA DESTRA</div>
  </div>

  <div id="footer">©2012 Il sito è a cura dello studio ... tutti i diritti riservati.</div>
</div>
</body>
</html>
P.S.: se modifichi la larghezza delle colonne laterali, sarà da modificare anche quella del contenitore generale che ho chiamato main che è da calcolare in base a larghezza di left+right+content+padding di content