morning 공간에는 해, 왼쪽 나무, 오른쪽 나무가 놓여 있습니다. 모든 이미지가 독립적이므로 서랍장을 따로 만들지 않고 설계 도면 작업을 진행합니다.

예제 소스 Exercise/14장/KidsGao/index.html

<!-- Morning Section -->
<div id="morning">
    <div class="sun"></div>
    <div class="leftPine"></div>
    <div class="rightPine"></div>
</div>

배치 작업이 안전하게 진행되도록 morning 공간에도 relative 속성값을 적용합니다. 왼쪽 나무는 마진 병합 현상이 발생하지 않도록 absolute 속성값을 적용하고 top 속성을 사용합니다. 오른쪽 나무는 morning 공간을 기준으로 오른쪽 아래에 배치되도록 absolute 속성값을 적용하고 right: 0과 bottom: 0을 적용합니다.