div로 레이아웃을 구성 할 때 발생하는 문제점 해결

부제: CSS 초보가 당황할 만한 것 #1

문제 :

두 개의 div를 좌우로 배치할 경우, 브라우저를 작게 줄이면 우측의 div가 아래로 내려간다.

해결법 요약 :

  1. 의미 없는 DIV로 감싼다
  2. Absolute positioning한다
  3. width를 fluid로 한다

상황 :

좌우로 두개의 column을 가진 layout…
다시말해 contents와 sidebar가 있는 layout의 경우.
(* presentation을 위한 css는 포함하지 않았음, id, class도 지정하지 않음)

* table로 코딩
<table>
<tbody>
<tr>
<td>CONTENTS</td>
<td>sidebar</td>
</tr>
</tbody>
</table>
* div로 코딩
<div>CONTENTS</div>
<div>sidebar</div>

“(table로 한다면) td 두 개로 좌우로 나누면, 옆에 녀석이 내려가지도 않고 얼마나 편하고 좋냐” 라고 말하실 분도 있을 지 모르겠습니다.
위와 같은 레이아웃에서 table과 div의 차이점에 대해 기술한 문서는 정말정말 많으니 궁금하신 분은 찾아보시길 바랍니다.
“굳이 div로 할 필요는 없잖아”라고 생각하시는 분은 table을 고수하셔도 말리지 않습니다.


해결법 설명

해결법 #1 : 의미 없는 DIV로 감싼다

contents와 sidebar를 의미 없는 div로 한번 더 깜싸주는 것입니다.
밖을 감싸는 녀석을 container라고 했을 때, container의 width가 안에 있는 두 div의 width를 합친 width로 고정되어 있어야 하겠지요.

이 방법은 의미상 바른 마크업(Semantic correct markup)에는 위배되겠지만..
감싸지 않은 녀석들이 움직이는 것을 보고 개발자가 table로 감싸버리는 것을 내버려 두는 것 보다는 나을 것 같습니다.

제가 얼마전에 양쪽으로 두개의 div를 배치한 코딩파일을 개발자분에게 드렸더니 “브라우저를 줄이면 내려가길래 table로 감쌌다”고 말씀해주시더라구요.
table 소스는 table width=”750″ 이었습니다.
나중에 제가 width를 빼고 css로 조정하는 방식으로 바꿔놓긴 했지만요.


해결법 #2 : Absolute positioning 한다

position은 기본적으로 static 속성을 가지고 있습니다. (position: static, relative, absolute, fixed, inherit)
위에 제시한 layout에도 기본적인 static속성을 가지고 있는 것인데요.
그 position을 absolute로 하면 말그대로 absolute-절대값을 가진 위치를 지니기 때문에 내려갈 일은 없지요.

헌데 가장 큰 의미의 겉 녀석이 absolute일 경우는 상관이 없을텐데, 어딘가의 내부에 들어가는 컨텐츠가 될 경우에는 absolute position이 문제가 생길 가능성이 있습니다.
(흔히 말하는 layer라는 개념입니다.)


해결법 #3 : width를 fluid로 한다 (%, em등)

  1. Fix :
    http://www.thenoodleincident.com/…/basic2_fixed.html
  2. Fluid :
    http://www.thenoodleincident.com/…/basic2_fluid_touch3.html

위의 두 경우를 비교해 보면, float나 position은 동일하고, 1번은 고정폭(fix) 2번은 가변폭(fluid)이라는 차이점이 있습니다.

고정폭일 경우는 브라우저의 크기가 두 div를 합친 width보다 작아질때 우측 div가 좌측 div의 하단으로 내려가게 되는데, 가변폭일 경우는 두 div에 지정한 각각의 %를 유지하기 때문에 브라우저를 아무리 줄여도 줄어든 브라우저 크기의 일정 %만큼을 유지하게 됩니다.
그래서 내려가지 않게 되지요.


초반에 굉장히 당황했던 것이 떠올라서 적어봤습니다. 제가 생각하는 해결법일 뿐이니, 더욱 효과적이고 효율적인 방법이 더 있다면 많은 분들이 더 알려주실 거라고 생각합니다.