현재 제정되고 있는 CSS3 Module 중 CSS Multi-Column Layout Module은 Candidate Recommendation 상태로 거의 권고 마무리 단계에 이르렀으며, 웹 브라우저의 지원 상황도 다른 모듈보단 비교적 양호한 상태이다.
물론, IE나 기타 미지원 브라우저를 위한 간단한 JavaScript pollyfill도 마련되어 있으며, 아무런 조치를 취하지 않아도 원래 내용을 전달하는 데는 별문제가 없어서, 지금 당장 써먹어도 큰 불편은 없다고 할 수 있는데 요놈의 쓰임새는 다음과 같다.
이렇듯 그 사용 방식도 명확해서 이해하기도 쉬운데, 브라우저별 구현 방식에서 아직 몇 가지 소소한 차이가 있어서 예상치 못한 부작용을 가져올 수도 있다.
예제 페이지의 보기 2에서 볼 수 있듯이, 많이 사용되진 않겠지만, column-width 혹은 column-count property를 함께 지정할 수 있는 columns property를 Firefox에선 제대로 인식하지 못하며, Safari와 Firefox에선 각각 float 그리고 overflow property와 연관된 이상현상을 확인할 수 있다.
예를 들어, 보기 3처럼 column boxes 안에 float된 elements가 포함되어 있을 때, spec에 따르면 인접한 해당 column box의 경계를 기준으로 위치해야 하는데, 유독 Safari에선 floats이 마지막 column에 있을 때 column box 경계를 벗어나서 엉뚱한 곳에 있게 된다. (뜻밖에도 같은 렌더링 엔진을 쓰는 Google Chrome에선 별 이상이 없다.)
이 문제를 해결하려고 보기 4처럼 상위 element에 overflow:hidden;으로 감싸주면 원래 위치에 제대로 표시되지만, Firefox에서 확인해 보면 또 각 column을 구분해주는 선(column-rule)이 사라져버리는 현상이 발생한다.
보기 5와 같이 pseudo-elements를 사용한 clearfix를 써주면 Firefox에서 사라졌던 경계선은 돌아오지만, 다시 Safari에서 보였던 문제가 발생하긴 매한가지.
해결책이라면 Safari에게만 JavaScript를 써서 overflow:hidden을 먹여줄 수도 있지만, 개운한 방법은 아니고, 결국 floats을 포함하고 있는 문단을 여러 column으로 나눌 땐 아직 주의가 필요하고 여러 브라우저에서의 테스트는 필수라는 얘기.
덧붙임(2011.4.21): WebKit Nightly Builds에선 여기에 설명된 문제가 고쳐졌음.