애자일러

CSS의 세계에서 레이아웃에 관한 만트라
"왼쪽은 팽팽하게, 오른쪽은 느슨하게"

Liquid
브라우저 너비와 상관 없이 레이아웃들이 확장되어 사용 가능한 공간을 채운다.
따라서 브라우저 화면에 있는 공간을 효과적으로 사용하는 데 유용하다.
사용자들이 화면을 재조정할 때 레이아웃이 변경되는(특히, 너비가) 단점이 있다.
float, clear 속성을 적절히 사용한다.

Frozen
엘리먼트를 잠그고 페이지를 고정된 상태로 만든다.
브라우저 윈도우가 확장되어도 레이아웃은 고정된 상태를 유지하므로 윈도우 확장으로 인한 부작용을 피할 수 있다.
#allcontent {
  width: 800px;
  ...
}

Jello
웹에서 일반적인 디자인 레이아웃이라고 할 수 있다.
페이지에 있는 콘텐츠 영역의 너비를 잠궈놓고(여기까지는 Frozen Layout) 브라우저 중앙에 콘텐츠를 놓는다.
#allcontent {
  ...
  margin-left: auto;
  margin-right: auto;
}

Absolute
#allcontent {
  position: absolute;
  top: 100px;
  right: 200px;
  width: 280px;
}
브라우저가 XHTML 엘리먼트들을 배치하는 플로우로부터 완전히 배제시킨다.

참고:
테이블을 사용하여 페이지 레이아웃을 만드는 방법은 어떤가?
아주 좋지 않은 방법이다. 만들기도 어렵고 유지 관리하기도 힘든 방법인데, XHTML과 CSS기술이 확산되기 이전의 예전 방식이다.

결론:
어떤 레이아웃을 선택할 것인가는 페이지를 위해 어떤 것이 최상으로 작동할지 판단하는 문제이다. 몇 개의 페이지에서는 확장 가능한 margin이 있는 고정된 콘텐초 영역의 너비가 잘 작동하며, 이는 실제로 넓은 브라우저에서 더 읽기가 쉽게 해준다.
일반적으로 float를 사용하는 것이 여러 개의 컬럼 레이아웃을 위한 가장 유연한 해결책으로 받아들여지고 있다. 다만 디자인에 따라 콘텐츠의 순서에 주의를 기울여야 한다는 사실을 명심해야 한다.