제가 지금 만들고 있는 홈피는    

본문 높이만큼 왼쪽 위젯이 쭈욱 길어지는 형태가 되었으면 좋겠어요. 

홈페이지는 지금... 만들고 있는 중인데...    

주소는 http://www.letsp.net 입니다.    

들어가보시자마자 무슨 말인지 아실거에요.   

아래는 빨강은 레이아웃 파일 태그구요....

파랑은 CSS 태그입니다 ㅠ

<!--// 레이아웃과 연동될 css 파일 import -->
<!--%import("css/default.css")-->


<!--@if($layout_info->background_image)-->
<style type="text/css">
    body { background:url({$layout_info->background_image}); }
</style>
<!--@end-->


<div id="container_site"
<!--@if($layout_info->container_site_width)-->
    style="width:{$layout_info->container_site_width};"
<!--@else-->
    style="width:1620px;"
<!--@end-->
>


    <div id="header">
       <div style="background-image:url(http://www.letsp.net/img/top_bg.gif);"><img src="http://www.letsp.net/img/top_bg.gif" width="26" height="183"><a href="http://www.letsp.net" onfocus='this.blur()'><img src="http://www.letsp.net/img/top_logo.gif" width="237" height="183"></a></div>
    </div><!--header 끝-->
   
    <div id="container_body" class="{$layout_info->layout_type}">

        <!--@if($layout_info->layout_type != "c")--><!--위젯 출력 조건부 시작-->
             
        <div id="e1" 
        <!--@if($layout_info->wid1_width)-->
            style="width:{$layout_info->wid1_width};"
        <!--@else-->
            style="width:263px;"
        <!--@end-->
        >
       
            <div class="wrapper" style="background-image:url(http://www.letsp.net/img/menu_bg.gif); float:left;"><img src="http://www.letsp.net/img/menu_null.gif" width="263" height="162" border="0" usemap="#Map"><map name="Map"><area shape="rect" coords="33,29,257,50" href="http://www.letsp.net/blog"><area shape="rect" coords="33,64,257,85" href="http://www.letsp.net/tboard"><area shape="rect" coords="33,100,257,120" href="http://www.letsp.net/photo"><area shape="rect" coords="33,135,257,155" href="http://www.letsp.net/gbook"></map>
            </div>
           
        </div><!--e1 끝-->
        <!--@end--><!--위젯 출력 조건부 끝-->
       
       
       
        <div id="container_contents">          
            <!--@if($layout_info->container_contents_style == "useBackground")-->   
            <div class="wrapper">
                {$content}
            </div>
           
            <!--@else-->           
            <div class="wrapperTrans">
                {$content}

            </div>
            <!--@end--><!--container_contents 배경선택부 끝-->

        </div><!--container_contens 끝-->
       
    </div><!--container_body 끝-->
   
   
     <div id="footer" style="background-image:url(http://www.letsp.net/img/footer_bg.gif)"><img src="http://www.letsp.net/img/footer_bg.gif"><img src="http://www.letsp.net/img/footer_menu.gif"><img src="http://www.letsp.net/img/footer_mail.gif" align="right">
     </div>
   </div><!--container_site 끝-->

@charset "utf-8";

/*
PXE Default layout template for XpressEngine (Dummy Version)
Markup : Hyunhw Jung
Website: http://www.premiumxe.com
Email : clubnb2@naver.com
*/


/* Browser Reset Preference - 수정하지 마십시오
---------------------------------------------------------------------------------*/
* { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em }
a img { border: none; }
fieldset { border:none; }



/* Layouts - Restricted Preference - 수정하지 마십시오
---------------------------------------------------------------------------------*/
#container_site { position:relative; *zoom:1; }
#header { position:relative; *zoom:1; }
#container_body { position:relative; *zoom:1; }
#container_contents { position:relative; *zoom:1; }

#e1 { float:left; position:relative; *zoom:1; }
#e1 .wrapper { position:relative;}

#footer { position:relative; *zoom:1; clear:both; overflow:hidden}
#footer_box1 { position:relative; *zoom:1; }
#footer_box2 { position:relative; *zoom:1; }
#footer_box3 { position:relative; *zoom:1; }
#footer_sub { position:relative; *zoom:1; }



/* Layouts - Margin & Position Preference - 필요에 따라 margin 값만 수정하세요
---------------------------------------------------------------------------------*/

#container_site { margin:0 auto; }
#header { margin:0 0 0 0; padding:0; }
#container_body {  }
#container_contents {  }
#container_contents .wrapper { padding:0; }
#container_contents .wrapperTrans { padding:0; }
#footer { margin:0 0 0 0; padding:0; overflow:hidden }
#footer_sub { margin-top:0px; padding:0px; }

/* 사이드바 1을 좌측에 정렬 */
.ec #e1 { float:left; margin-right:10px; }
.ec #container_contents { width: 800px; }

#e1 .wrapper { padding:0px 0px; }
#e2 .wrapper { padding:0px 0px; }


/* Layouts - Customization - 여기서부터 자유롭게 코딩합니다
---------------------------------------------------------------------------------*/
body { background:#ffffff;}
p { margin-bottom:10px; line-height:140%; text-align:justify; }
p a {  }
a, a:visited { text-decoration: none; }
a:hover { text-decoration:none; }

#container_site { margin:0 auto; }
#header {  }
#container_body {  }
#container_contents { text-align:justify; line-height:140%; overflow:hidden; }
#container_contents .wrapper { overflow:hidden; }
#container_contents .wrapperTrans { overflow:hidden; }

#e1 { overflow:hidden; }
#e1 .wrapper {  }

#footer { background:#ffffff; overflow:hidden; }