레이아웃 - 하나의 레이아웃에서 메인과 서브의 넓이 다르게 적용하기

1. XE Setting

$index 라는 변수를 레이아웃 상단에서 먼저 정의를 합니다.

{@
$index = ($mid=='index' && !$act) || ($site_module_info->module_srl === $current_module_info->module_srl  && !$act);
}

2. HTML

<div id="contents">
   <div class="<!--@if($index)-->container-sm<!--@else-->container<!--@end-->">
      <div id="main">
         <block cond="$index"...>
         <block cond="!$index">{$content}</block>
      </div>
      <aside id="side"...>
   </div>
</div>

메인인 $index일 경우에는 container-sm 을 적용하고, 서브일 경우 container 기본 넓이가 되게끔 넣어줍니다.

3. CSS

$width-container:1170px;
$width-container-sm:965px;

.container{width:$width-container;margin:0 auto;}
.container:after{display:table;width:100%;content:"";}
.container-sm{width:$width-container-sm;margin:0 auto;}
.container-sm:after{display:table;width:100%;content:"";}

#main{
   float:left;
   width: calc(100% - 310px);
}