Dreamweaver CSS 相對位子、絕對位子應用

CSS：
 
#content{
    width: 960px;
    margin-top: 5px;
    margin-right: auto;
    margin-left: auto;
}
#contentR{
    width: 80%;
    margin-left: 20%;
}
#contentL{
    width: 20%;
    float: left;
} 
.floatR{
    float: right;
}
.floatL{
    float: left;
}
.floatC{
    clear: both;
}


=================================分隔線=====================================
 
html
<div id="content">
    <div id="contentL"></div>
    <div id="contentR">
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
    </div>
</div>

====================解說====================
relative(相對位子)、absolute(絕對位子)
先將box1定位成相對位子( contentR互動)、
 裏頭的box2、box3、box4，定位才不會出問題，
 此時就可以定位成、絕對位子、或是相對位子

.box1{
    position: relative;
}
.box2{
    position: relative;
}
.box3{
    position: absolute;
}
.box4{
    position: absolute;
}

dw裏顯示不正常，要設定box2、3、4的高度為100%，就會正常了