다음으로 <aside id="left">, <section>, <aside id="right"> 공간에 대한 배치 작업을 진행하겠습니다.

<aside id="left"> 안에 float: left;을 적용하면 파란색 박스는 브라우저 왼쪽 끝으로 정렬됩니다. 주황색 박스는 위로 올라가면서 원래 크기보다 작게 출력됩니다. 눈으로는 주황색 박스의 크기가 변한 것처럼 보이지만 실제로는 파란색 박스 뒤에 주황색 박스가 배치된 상태입니다.

예제 소스 Exercise/9장/2_float/style03.css

#left {
    float: left;
    width: 150px;
    height: 200px;
    background-color: blue;
}