좌측 메뉴가 말썽이라 고민이네요ㅜ
질문은요,





그림과 같이 좌측 메뉴의 배경{라인}이 오른쪽 컨텐츠 글의 길이에 따라 자동으로 반복되지 않습니다.
CSS 설정은 다음과 같이 했습니다. 

/* Site Layout - Content Body */
#contentBody { position:relative; width:1024px; padding-bottom:30px; overflow:hidden; background:url() repeat-y left top; border-bottom:0px solid #dddddd;}

/* Site Layout - Column Left */
#columnLeft { position:relative; width:266px; float:left; background:url(/images/sub_left_bg.jpg) repeat;}
#columnLeft .mask { width:266px; height:0px; background:url(/images/sub_left_bg.jpg) repeat }

#lnb { border-top:0px solid #dddddd; padding:0px 0px 0px 0px; width:200px;}
#lnb li { list-style:none; padding-bottom:0px;}
#lnb li a { padding:0px 0px 0px 0px; width:100px; display:block; border:0px solid #e8e8e8; color:#3e3e3e; position:relative; z-index:99; text-decoration:none;}
#lnb li a:hover,
#lnb li a:focus { color:#ffffff; background:#de4332; border:0px solid #de4332;}
#lnb li.on a { color:#ffffff; background:#de4332; border:0px solid #de4332;}
#lnb li.on a:hover,
#lnb li.on a:focus { font-weight:bold;}
#lnb li ul { display:block; position:relative; width:30px; padding:0 0px; position:relative; border-top:0px solid #ffffff; overflow:hidden;}
#lnb li.on ul { display:block;}
#lnb li ul li { padding:0; border-top:0px solid #f2f2f2; position:relative; top:0px;}
#lnb li ul li a { padding:0px 0px 0px 0px; width:100px; color:#818181 !important; border:none; background:none !important; border:none !important;}
#lnb li ul li a:hover,
#lnb li ul li a:focus { font-weight:normal !important; color:#de4332 !important;}
#lnb li.on ul li.on a { color:#ff1a00 !important; font-weight:bold !important; 100px center  !important;}

/* Site Layout - Column Right */
#columnRight { width:758px; float:left; overflow:hidden;}
#visualArea { width:783px; height:200px; background:#f5f5f5; margin-bottom:0; position:relative; left:0px; margin-right:0px;}
#content { width:100%; overflow:hidden;}


--
파란색 부분의 소스가 좌메뉴 배경을 반복시켜준 것인데요, 
적용해 보면 잘 작동하긴 합니다. 그러나, 문제는 오른쪽 메뉴 길이가 늘어짐과 동시에 
좌 메뉴 길이 또한 늘어져야 하는데, 그러지 못하다는 점입니다. 
말로 설명하려니 어려운데요, 

레이아웃 소스를 보면

<div id="contentBody">
  <div id="columnLeft">

          <!-- 왼쪽 2차 메뉴 -->
            <img src ="/images/sub1_left_img.jpg">
            <!--@if($menu_1st)-->
   <ol id="lnb">
                {@ $idx = 1 }
                <!--@foreach($menu_1st['list'] as $key => $val)--><!--@if($val['link'])-->
    <li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link'+ '+ ']}</a>

                    <!-- main_menu 3차 시작 -->
                    <!--@if($val['+ 'list'] && ($val['expand']=='Y'||$val['selected']) )-->
     <ul>
                    <!--@foreach($val['list'] as $k => $v)--><!--@if($v['link'])-->
      <li <!--@if($v['selected'])-->class="on"<!--@end-->><a href="{$v['href']}" <!--@if($v['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$v['link']}</a></li>
                    <!--@end--><!--@end-->
     </ul>
                    <!--@end-->
    </li>
                {@$idx++}
                <!--@end--><!--@end-->
   </ol>
            <!--@end-->
            <br>
            <img src ="/images/sub01_left.jpg">
            <br><br><br>
  </div>

 
붉은색 부분 br 테그를 적용한 만큼 배경 반복이 작동됩니다.
즉 제가 올린 첨부 파일 그림에서의 문제가, 위 레이아웃에서처럼 br 테그를 끊임없이 입력시켜주면-_-
해결된다는 점입니다.

페이지야 이런 편법으로 어떻게든 되겠지만,
문제는 게시판 같이 긴 글이 작성될 때는... 전혀 그럴 수 없다는 점입니다.

도대체 뭐가 문제일까요?ㅜ
어떻게 해결해야 할지 막막하네요.

제로 유저님들께 도움을 청합니다.