admin post

고정 폭 블럭과 가변 폭 블럭을 좌우로 float하여 가로로 배치할 때, 예를 들어 블로그의 본문과 사이드바에서, 본문은 가변폭으로 하고 싶고, 사이드바는 고정 폭으로 하고 싶을 때, 사이드바의 폭이 200px로 고정되어 있는 상태에서 본문의 폭을 브라우저 창의 최대 폭에서 200px만큼 뺀 크기로 해서 배치하고 싶다. 그런데 css에서 width: 100% - 200px 처럼 산술식은 지원하지 않는다. 이것을 margin값에 음수를 줘서 구현할 수 있다.

html:
<div id="contentsWrapper">
<div class="content"></div>
<div class="content"></div>
</div>
<div id="sidebar"></div>

content는 각각의 포스트 본문이고 sidebar는 사이드 바 영역 이다. contentsWrapper는 본문들을 감싸는 엘리먼트이다.

contentsWrapper에는 width: 100%와 margin-right: -200px를 준다. 그러면 contentsWrapper는 웹 브라우저 창 폭(또는 상위 엘리먼트의 폭)만 큼의 너비를 가진다. 오른쪽 여백이 -200px이므로 폭 200px짜리 sidebar가 올 수 있다. contentsWrapper에 float: left, sidebar에 float: right를 준다. 오른쪽 200px이 contentsWrapper와 sidebar가 겹친 상태이다.

css preview

이러면 content의 일부는 sidebar가 덮어버린 상태이다. 여기서 content에 margin-right: 200px를 준다. 그러면 포스트 본문이 가변폭을 지원하면서 sidebar와 사이좋게 공간을 나누어 쓴다.

css preview

css:
#contentsWrapper {
	float: left;
	width: 100%;
	margin-right: -200px;
}

.content {
	margin-right: 200px;
}

#sidebar {
	width: 200px;
	float: right;
}

여백을 좀 더 추가해서 다음과 같은 디자인이 나올 수 있다.

screen of large width

폭이 넓은 해상도

screen of middle width

중간 폭 해상도

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST
  1. Favicon of http://pcnara.tistory.com BlogIcon pcnara 2009.10.19 19:57 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.제가 원하던 질문의 답을 창아 여기까지 왓네요.
    현재 가변폭 스킨을 찾던중 찾았는데 원하는 스타일로 안되서 이렇게 질문을 드립니다.
    스킨은 Safari skin Final 입니다. 아래 주소에서 배포하는걸 사용하죠.
    http://designnia.tistory.com/?page=10

    문제는 글쓰신것처럼 사이드바를 200px로 고정하고 본문만 넓어지게 하고 싶은데....
    글대로하니 어느정도는 해답을 찾은거 같습니다.

    현재 레이아웃을 이렇게 했습니다.
    #container { width:100%; float:left; margin-right:-200px;}
    #content { width:77%; float:left; padding:10px 0 10px 20px;} --->요건 있는 그대로
    .content {margin-right:200px;}
    #sidebar { width:200px; float:right; padding-left:10px; padding-top:10px;}

    있는 글대로의 css에 글보고 따라한것만 적용을 했지요. 그러니 잘 나오더군요.

    여기까지 ....
    질문드립니다. 넘 사설이 길었죠^^.그만큼 답답합니다.
    너비를 넓히면 넗힐수록 본문과 사이드바의 간격이 점점 멀어집니다.
    그림과 블로그 주소입니다. 참고하세요.
    http://pcnara.tistory.com/entry/본문과-사이드바가-넓어지는-문제

  2. Favicon of http://pcnara.tistory.com BlogIcon pcnara 2009.10.21 22:17 신고  댓글주소  수정/삭제  댓글쓰기

    답변 고맙습니다. 광고쪽까지 말씀해주셔서 참고했습니다. 고마워요.
    기초적인 질문 하나더 드립니다. 전 해봐도 안되더군요.

    말씀하신 contentsWrapper 는 스킨에 없고 아래형식으로 되어있습니다.
    container
    header
    wrapper
    content -- 여기에 content 가 있거든요.
    그다음 content 닫고 wrapper 까지 div 로 닫고
    sidebar 가 시작됩니다. 어느 부분에 contentsWrapper 가 시작이 되어야하나요? container와 같은건가요?

    • Favicon of https://peecky.tistory.com BlogIcon Peecky 2009.10.22 14:47 신고  댓글주소  수정/삭제

      지금 pcnara님 블로그 소스 기준으로

      <div id="wrapper">와 <div id="content"> 사이에 <div id="contentsWrapper"> 추가,

      </div><!-- content close --> 와 <div id="sidebar"> 사이에 </div> 추가 하시면 됩니다.

    • Favicon of http://pcnara.tistory.com BlogIcon pcnara 2009.10.22 22:14 신고  댓글주소  수정/삭제

      감사합니다. 그대로 적용했습니다.

      이건 여담입니다.
      가변폭 스킨이 얼마 보이지가 않더군요.
      왜 그런지 혹시 아시나요?
      혹시 가변폭 스킨에 대한 문제점이있나해서요?

      제가 자주가는 외국사이트는 3단형식으로해서 가변폭 스킨이 아주 많이 있던데....
      도움 많이 됐습니다.고맙습니다.

    • Favicon of http://pcnara.tistory.com BlogIcon pcnara 2009.10.22 23:48 신고  댓글주소  수정/삭제

      죄송하지만 한가지만 더 질문드리겠습니다.
      ie8인데요. ie에서는 레이아웃이 깨지는데 혹시 이유를 아시나요?
      혹 핵같은거 때문이 아닐까싶은데...

    • Favicon of https://peecky.tistory.com BlogIcon Peecky 2009.11.02 21:13 신고  댓글주소  수정/삭제

      소스 보기를 하니 contentsWrapper는 안 보이는데요? 아직 추가 안 된 것 같아요.

      레이아웃이 깨진다는건 정확히 어느 부분을 말씀하시는 건가요? 일단 #content의 width값이 현재 문제이긴 합니다.

  3. Favicon of http://blog.daum.net/miriya BlogIcon miriya 2012.06.17 19:59  댓글주소  수정/삭제  댓글쓰기

    정말정말 감사합니다.
    이 팁은 여러번 참조하게 되는군요. 최곱니다!