ヘッダや左メニューより、記事の領域をソースコード上の上部に記述する方法を紹介します。

HTMLのコードは下記のとおりです。

<!-- container領域 [s] -->
<div id="container">
<!-- sub-container領域 [s] -->
<div id="sub-container">
<!-- main領域 [s] -->
<div id="main">
<div class="col-center">
col-center
</div>
<div class="col-right">
col-right
</div>
</div>
<!-- main領域 [e] -->
<!-- footer領域 [s] -->
<div id="footer">
footer
</div>
<!-- footer領域 [e] -->
<!-- col-left領域 [s] -->
<div id="col-left">
col-left
</div>
<!-- col-left領域 [e] -->
</div>
<!-- sub-container領域 [e] -->
<!-- header領域 [s] -->
<div id="header">
header
</div>
<!-- header領域 [e] -->
</div>
<!-- container領域 [e] -->

CSSのコードは下記のとおりです。

/* CONTAINER					##################################### */
div#container{
margin: 0;
overflow: hidden;
}
div#sub-container{
margin: 95px auto 0 auto;
width: 980px;
}
/* HEADER						##################################### */
div#header{
clear: both;
position: absolute;
margin: 0 auto;
top: 0;
width: 100%;
}
div#header div.topnavi{
margin: 0 auto;
width: 980px;
}
/* BODY							##################################### */
div#main{
background: red;
margin-left: 240px;
width: 740px;
overflow: hidden;
}
div#main div.col-center{
float: left;
width: 520px;
}
div#main div.col-right{
float: left;
width: 220px;
background: green;
}
/* BODY-LEFT AREA				##################################### */
div#col-left{
position: absolute;
top: 95px;
width: 240px;
background: blue;
}
/* FOOTER						##################################### */
div#footer{
width: 100%;
width: 980px;
background: yellow;
}