"일모리의 CSS 쉽게 배우기" 사이트를 보다가 간단하게 한번 짜보았습니다.
전체너비 700픽셀 가운데 정렬이며 충분히 실전에 사용가능한 심플한 예제입니다.
<!-- content exp --> 에서 <!-- /content exp --> 까지는 content 영역에 여러번 복제해서 사용해도 되도록 했습니다.
부족한 부분은 코멘트를 통해 보충해주시면 고맙겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> CSS 레이아웃 예제 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">
/*기본코드*/
html {
    background: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: tahoma, verdana, gulim, 굴림,sans-serif;
    font-size: 12px;
}

body {
    margin: 0;
    text-align: center;/*가운데 정렬*/
}

a {
    text-decoration: none;
    color: black;
}
/*wrap */
#wrap {
    background: #eee url(wrap.gif) no-repeat top left;
    width: 700px;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}
/*wrap ie - ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 한다 */
* html #wrap {
    width: 710px;
}
/* header 부분 */

/* id= header 로 정해진곳을 부릅니다 */
#header {
    background: #aaa url(header.gif);
    border: 1px solid #ddd;
    width: 600px;
    height: 70px;
    padding: 0;
    margin: 0;
}

/*sidebar 부분 */
.sidebar {
    width: 90px;
    padding: 0;
    margin: 0;
    background: #eee url(sidebar.gif) no-repeat top left;
    float:left; /*왼쪽으로 붙입니다*/
}
.sidebar ul  {
    padding: 0;
    margin: 0px;
}
.sidebar ul li {
    padding: 0;
    margin: 0;
    list-style-image: none;
    list-style-type: none;
}

/* menu 의 링크 꾸미기 없게*/
.sidebar ul li a {
    text-decoration: none;
}

/* content 부분 */
#content {
    float: left;
    width: 500px;
    padding: 0;
    margin: 0;
    text-align: left;
    background: #bbb;
}

#content .mid {
    float: left;
    width: 245px;
    padding: 0;
    margin: 0;
    text-align: left;
    background: #ddd;
}

#content .right {
    float: left;
    width: 245px;
    padding: 0;
    margin: 0;
    text-align: left;
    background: #ccc;
}

.writing {
    line-height: 150%;
    letter-space: .2em;
    margin:0;
    width: 245px;
}

.hspace {
    float: left;
    width: 10px;
    height: auto;
    margin: 0;
    padding: 0;
    background: #fff;/*transparent*/
}
.vspace {
    width: auto;
    height: 10px;
    margin: 0;
    padding: 0;
    background: #fff;/*transparent*/
    clear:both;
}

/* id= footer 로 정해진곳을 부릅니다 */
#footer {
    background: #ccc url(footer.gif);
    border: 1px solid #ddd;
    width: 600px;
    height: 70px;
    padding: 0;
    margin: 0;
}
</style>

</head>

<body>

<div id="wrap">
<pre>
CSS를 활용한 레이아웃 잡기 - 기본
h-가로여백, v-세로여백
전체 기본영역 700px로 해봅니다.
ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 하는점 필히 숙지하세요.
예) * html #wrap { width:710px; }
</pre>

    <div id="header">헤더 600*70</div>

    <div class="sidebar">좌측 메뉴 90
        <ul>
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </div>

    <div class="hspace">h</div>

    <div id="content">콘텐츠 500 - 콘텐츠 최상위 영역으로 실제 보이지 않음

        <div style="text-align:center;border:1px dashed #fff;">콘텐츠 상단 가로 통합영역<br><br></div>

        <div style="clear:both;"></div>

        <!-- content exp -->
        <div class="vspace" style="text-align:center;">v</div>

        <div class="mid">245 콘텐츠 좌측영역
            <div class="writing">
                 <p>writing</p>
            </div>
        </div>

        <div class="hspace">h</div>


        <div class="right">245 콘텐츠 우측영역
            <div class="writing">
                    <p>writing</p>
            </div>
        </div>

        <div style="clear:both;"></div>
        <!-- /content exp -->

        <!-- content exp -->
        <div class="vspace" style="text-align:center;">v</div>

        <div class="mid">245 콘텐츠 좌측영역
            <div class="writing">
                 <p>writing</p>
            </div>
        </div>

        <div class="hspace">h</div>


        <div class="right">245 콘텐츠 우측영역
            <div class="writing">
                    <p>writing</p>
            </div>
        </div>

        <div style="clear:both;"></div>
        <!-- /content exp -->

        <div style="text-align:center;border:1px dashed #fff;">콘텐츠 하단 가로 통합영역<br><br></div>

    </div>

    <div class="hspace">h</div>

    <div class="sidebar">우측 메뉴 90
        <ul>
            <li>menu1</li>
        </ul>
    </div>

    <div style="clear:both;"></div>

    <div id="footer">풋 600*70</div>

</div>

</body>
</html>