div 3개 일렬로 정렬

[태그 모양]

<div style="border: 1px solid gold; float: left; width: 33%;">
첫번째 영역
</div>
<div style="border: 1px solid red; float: left; width: 33%;">
두번째 영역
</div>
<div style="border: 1px solid blue; float: left; width: 33%;">
세번째 영역 
</div>


<div style="border: 1px solid gold; float: left; width: 30%; padding:10px;">
첫번째 영역
</div>
<div style="border: 1px solid red; float: left; width: 30%; padding:10px;">
두번째 영역
</div>
<div style="border: 1px solid blue; float: left; width: 30%; padding:10px;">
세번째 영역
</div>


<div style="border: 1px solid gold; float: left; width: 30%; padding:10px;">
첫번째 영역
</div>
<div style="border: 1px solid red; float: left; width: 30%; padding:10px;">
두번째 영역
</div>
<div style="border: 1px solid blue; float: right; width: 30%; padding:10px;">
세번째 영역
</div>

[적용후의 모습]

첫번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

두번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

세번째 영역: 각각의 영역의 너비를 33%로 주고 여백을 주지 않았다

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌

첫번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌.
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다

두번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다 

세번째 영역: 각각의 영역의 너비를 30%로 주고 안여백(padding)을 줌
마지막 영역의 float 속성을 right로 주어 오른쪽 끝으로 붙였다 

위에서 보는 것처럼, 여백을 주고 너비를 30%로 줄인 두 번째 예의 전체 너비가 그렇지 않은 첫 번째 예의 전체 너비보다 조금 짧다.
세번째 예는 영역의 오른쪽 끝선을 맞추기 위해, 마지막 영역의 float속성을 right(오른쪽)으로 지정하였다. 따라서 세번째 예에서는 두번째 영역과 마지막 세번째 영역 사이에 공백이 생겼다.