diff --git a/classes/widget/WidgetHandler.class.php b/classes/widget/WidgetHandler.class.php
index 4f7ef704f..ce11a2c7b 100644
--- a/classes/widget/WidgetHandler.class.php
+++ b/classes/widget/WidgetHandler.class.php
@@ -47,21 +47,45 @@
                 $output = $oWidget->proc($args);
             }
 
-            $style = "";
-            $style .= sprintf("margin:%dpx %dpx %dpx %dpx;", $args->widget_margin_top, $args->widget_margin_right,$args->widget_margin_bottom,$args->widget_margin_left);
-
             if($args->widget_fix_width == 'Y') {
-                $style .= sprintf("%s:%spx;", "width", trim($args->widget_width));
+                $widget_width_type = strtolower($args->widget_width_type);
+                if(!$widget_width_type||!in_array($widget_width_type,array("px","%"))) $widget_width_type = "px";
+
+
+                if($widget_width_type == "px") {
+
+                    $style = "overflow:hidden;";
+                    $style .= sprintf("%s:%s%s;", "width", $args->widget_width - $args->widget_margin_right - $args->widget_margin_left, $widget_width_type);
+                    $style .= sprintf("margin-top:%dpx;margin-bottom:%dpx;", $args->widget_margin_top, $args->widget_margin_bottom);
+
+
+                    $inner_style = sprintf("margin-left:%dpx;margin-right:%dpx;", $args->widget_margin_left, $args->widget_margin_right);
+
+                    if($args->widget_position) {
+                        $style .= sprintf("%s:%s;", "float", $args->widget_position);
+                        $output = sprintf('<div style="%s"><div style="%s">%s</div></div>',$style, $inner_style, $output);
+                    } else {
+                        $style  .= "float:left;";
+                        $output = sprintf('<div class="clear"></div><div style="%s"><div style="%s">%s</div></div>',$style, $inner_style, $output);
+                    }
 
-                if($args->widget_position) {
-                    $style .= sprintf("%s:%s;", "float", trim($args->widget_position));
-                    $output = sprintf('<div style="%s">%s</div>',$style, $output);
                 } else {
-                    $style  .= "float:left;";
-                    $output = sprintf('<div class="clear"></div><div style="%s">%s</div>',$style, $output);
+
+                    $style = sprintf("overflow:hidden;%s:%s%s;", "width", $args->widget_width, $widget_width_type);
+
+                    $output = sprintf('<div style="margin:%dpx %dpx %dpx %dpx;">%s</div>', $args->widget_margin_top, $args->widget_margin_right,$args->widget_margin_bottom,$args->widget_margin_left, $output);
+
+                    if($args->widget_position) {
+                        $style .= sprintf("%s:%s;", "float", $args->widget_position);
+                        $output = sprintf('<div style="%s">%s</div>',$style, $output);
+                    } else {
+                        $style  .= "float:left;";
+                        $output = sprintf('<div class="clear"></div><div style="%s">%s</div>',$style, $output);
+                    }
                 }
+
             } else {
-                $output = sprintf('<div style="%s">%s</div>',$style, $output);
+                $output = sprintf('<div style="margin:%dpx %dpx %dpx %dpx;">%s</div>', $args->widget_margin_top, $args->widget_margin_right,$args->widget_margin_bottom,$args->widget_margin_left, $output);
             }
 
             if(__DEBUG__==3) $GLOBALS['__widget_excute_elapsed__'] += getMicroTime() - $start;
diff --git a/common/css/default.css b/common/css/default.css
index 832217788..8faeb9911 100644
--- a/common/css/default.css
+++ b/common/css/default.css
@@ -60,7 +60,7 @@ a.bold { font-weight:bold; }
 .folder_closer { display: none; }
 .folder_area { display: none; }
 
-.zbxe_widget_output { background:url(../tpl/images/widget.gif) no-repeat center; background-color:#FFFFFF; border:3px dotted #039311; display:block; }
+.zbxe_widget_output { background-image:url(../tpl/images/widget_text.gif) no-repeat center bottom; display:block;}
 .member_signature { margin-top:10px; border:1px solid #DDDDDD; padding:10px; }
 
 #waitingforserverresponse { display:inline; border:2px solid #444444; background-color:#FFFFFF; padding:15px 20px 13px 20px; font-weight:bold; color:#444444; top:40px; left:40px; position:absolute; z-index:100; visibility:hidden; }
diff --git a/common/tpl/images/widget.gif b/common/tpl/images/widget.gif
index 384b415a3..ccd3ea82c 100644
Binary files a/common/tpl/images/widget.gif and b/common/tpl/images/widget.gif differ
diff --git a/common/tpl/images/widget_bg.jpg b/common/tpl/images/widget_bg.jpg
new file mode 100755
index 000000000..62c0e5d5a
Binary files /dev/null and b/common/tpl/images/widget_bg.jpg differ
diff --git a/common/tpl/images/widget_text.gif b/common/tpl/images/widget_text.gif
new file mode 100755
index 000000000..ad260736b
Binary files /dev/null and b/common/tpl/images/widget_text.gif differ
diff --git a/modules/widget/lang/ko.lang.php b/modules/widget/lang/ko.lang.php
index 8472b6531..bd9a150c7 100644
--- a/modules/widget/lang/ko.lang.php
+++ b/modules/widget/lang/ko.lang.php
@@ -26,9 +26,9 @@
     $lang->widget_margin_bottom = '아래 ';
     $lang->widget_margin_left= '왼쪽';
     $lang->about_widget_fix_width = '선택하시면 가로크기가 고정됩니다.';
-    $lang->about_widget_width = '가로 크기를 선택해주세요.';
+    $lang->about_widget_width = '가로 크기를 입력해주세요.';
     $lang->about_widget_position = '한 줄에 여러개의 위젯을 나열하고 싶을때에는 위치를 선택해주세요.';
-    $lang->about_widget_margin = '한 줄에 여러개의 위젯을 나열하고 싶을때에는 위치를 선택해주세요.';
+    $lang->about_widget_margin = '지정된 위젯의 상하좌우 여백을 지정할 수 있습니다';
     $lang->about_widget_cache = '지정된 시간동안 캐시된 데이터를 이용할 수 있습니다.';
 
     $lang->generated_code = '생성된 코드';
diff --git a/modules/widget/tpl/js/widget_admin.js b/modules/widget/tpl/js/widget_admin.js
index 8c24a15fd..f0a99f223 100644
--- a/modules/widget/tpl/js/widget_admin.js
+++ b/modules/widget/tpl/js/widget_admin.js
@@ -133,14 +133,18 @@ function doFillWidgetVars() {
 
     }
 
+/*
     var marginLeft = 0;
     if(selected_node.style.marginLeft) marginLeft = parseInt(selected_node.style.marginLeft.replace(/px$/,''),10);
     var marginRight = 0;
     if(selected_node.style.marginRight) marginRight = parseInt(selected_node.style.marginRight.replace(/px$/,''),10);
     var border = 0;
     if(selected_node.style.border) border= parseInt(selected_node.style.boarder.replace(/px$/,''),10);
+*/
     
-    fo_obj.widget_width.value = xWidth(selected_node) + marginLeft + marginRight - 6;
+    var width_type = "px";
+    if(selected_node.getAttribute("widget_width_type")=="%") width_type = "%";
+    else fo_obj.widget_width.value = xWidth(selected_node);
 
     //  컬러셋 설정
     if(skin && xGetElementById("widget_colorset").options.length<1 && colorset) {
@@ -150,3 +154,12 @@ function doFillWidgetVars() {
     // widget sequence 설정
     fo_obj.widget_sequence.value = widget_sequence;
 }
+
+function checkFixType(obj) {
+    var val = obj.options[obj.selectedIndex].value;
+    if(val != "px") {
+        var fo_obj = xGetElementById("fo_widget");
+        var width = fo_obj.widget_width.value;
+        if(width>100) fo_obj.widget_width.value = 100;
+    }
+}
diff --git a/modules/widget/tpl/widget_generate_code.html b/modules/widget/tpl/widget_generate_code.html
index 10dc19ef3..47fec730f 100644
--- a/modules/widget/tpl/widget_generate_code.html
+++ b/modules/widget/tpl/widget_generate_code.html
@@ -76,6 +76,52 @@
             </td>
         </tr>
         <!--@end-->
+        <tr>
+            <th scope="row">{$lang->widget_margin}</th>
+            <td>
+                <table border="0" cellspacing="1">
+                <tr>
+                    <td colspan="2" align="center">{$lang->widget_margin_top} <input type="text" name="widget_margin_top" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                <tr>
+                    <td>{$lang->widget_margin_left} <input type="text" name="widget_margin_left" value="0" size="2" class="inputTypeText"/>px</td>
+                    <td align="right">{$lang->widget_margin_right} <input type="text" name="widget_margin_right" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                <tr>
+                    <td colspan="2" align="center">{$lang->widget_margin_bottom} <input type="text" name="widget_margin_bottom" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                </table>
+                <p>{$lang->about_widget_margin}</p>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row">{$lang->widget_fix_width}</th>
+            <td>
+                <input type="checkbox" value="Y" name="widget_fix_width" /> {$lang->about_widget_fix_width}
+            </td>
+        </tr>
+        <tr>
+            <th scope="row">{$lang->widget_width}</th>
+            <td>
+                <input type="text" value="50" name="widget_width" size="3" class="inputTypeText" />
+                <select name="widget_width_type" onchange="checkFixType(this)">
+                    <option value="%">%</option>
+                    <option value="px">px</option>
+                </select>
+                <p>{$lang->about_widget_width}</p>
+            </td>
+        </tr>
+        <tr>
+            <th scope="row">{$lang->widget_position}</th>
+            <td>
+                <select name="widget_position">
+                    <option value="">{$lang->widget_position_none}</option>
+                    <option value="left">{$lang->widget_position_left}</option>
+                    <option value="right">{$lang->widget_position_right}</option>
+                </select>
+                <p>{$lang->about_widget_position}</p>
+            </td>
+        </tr>
         <tr>
             <th>{$lang->generated_code}</th>
             <td><textarea readonly="true" id="widget_code" class="inputTypeTextArea w100"></textarea></td>
diff --git a/modules/widget/tpl/widget_generate_code_in_page.html b/modules/widget/tpl/widget_generate_code_in_page.html
index 6f408b11c..0ec4ef3a1 100644
--- a/modules/widget/tpl/widget_generate_code_in_page.html
+++ b/modules/widget/tpl/widget_generate_code_in_page.html
@@ -81,12 +81,19 @@
         <tr>
             <th scope="row">{$lang->widget_margin}</th>
             <td>
-                {$lang->widget_margin_top} <input type="text" name="widget_margin_top" value="0" size="2" class="inputTypeText" />px
-                {$lang->widget_margin_right} <input type="text" name="widget_margin_right" value="0" size="2" class="inputTypeText" />px
-                {$lang->widget_margin_bottom} <input type="text" name="widget_margin_bottom" value="0" size="2" class="inputTypeText" />px
-                {$lang->widget_margin_left} <input type="text" name="widget_margin_left" value="0" size="2" class="inputTypeText"/>px
-                <br />
-                {$lang->about_widget_margin}
+                <table border="0" cellspacing="1">
+                <tr>
+                    <td colspan="2" align="center">{$lang->widget_margin_top} <input type="text" name="widget_margin_top" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                <tr>
+                    <td>{$lang->widget_margin_left} <input type="text" name="widget_margin_left" value="0" size="2" class="inputTypeText"/>px</td>
+                    <td align="right">{$lang->widget_margin_right} <input type="text" name="widget_margin_right" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                <tr>
+                    <td colspan="2" align="center">{$lang->widget_margin_bottom} <input type="text" name="widget_margin_bottom" value="0" size="2" class="inputTypeText" />px</td>
+                </tr>
+                </table>
+                <p>{$lang->about_widget_margin}</p>
             </td>
         </tr>
         </table>
@@ -103,7 +110,11 @@
         <tr>
             <th scope="row">{$lang->widget_width}</th>
             <td>
-                <input type="text" value="400" name="widget_width" size="3" class="inputTypeText" />px
+                <input type="text" value="50" name="widget_width" size="3" class="inputTypeText" />
+                <select name="widget_width_type" onchange="checkFixType(this)">
+                    <option value="%">%</option>
+                    <option value="px">px</option>
+                </select>
                 <p>{$lang->about_widget_width}</p>
             </td>
         </tr>
diff --git a/modules/widget/widget.controller.php b/modules/widget/widget.controller.php
index 192bc951a..d90cf5302 100644
--- a/modules/widget/widget.controller.php
+++ b/modules/widget/widget.controller.php
@@ -21,12 +21,18 @@
             $vars = Context::getRequestVars();
             $widget = $vars->selected_widget;
 
-            $blank_img_path = "./common/tpl/images/blank.gif";
+            $blank_img_path = Context::getRequestUri()."common/tpl/images/widget_bg.jpg";
 
             unset($vars->module);
             unset($vars->act);
             unset($vars->selected_widget);
 
+            if($vars->widget_sequence) {
+                $cache_path = './files/cache/widget_cache/';
+                $cache_file = sprintf('%s%d.%s.cache', $cache_path, $vars->widget_sequence, Context::getLangType());
+                @unlink($cache_file);
+            }
+
             $vars->widget_sequence = getNextSequence();
             if(!$vars->widget_cache) $vars->widget_cache = 0;
 
@@ -38,18 +44,17 @@
                 }
             }
 
-
-            $style = "";
-            $style .= sprintf("margin:%dpx %dpx %dpx %dpx;", $vars->widget_margin_top, $vars->widget_margin_right,$vars->widget_margin_bottom,$vars->widget_margin_left);
-
             if($vars->widget_fix_width == 'Y') {
-                $vars->widget_width = $vars->widget_width - $vars->widget_margin_left - $vars->widget_margin_right;
-                $style .= sprintf("%s:%spx;", "width", trim($vars->widget_width));
-                if($vars->widget_position) $style .= sprintf("%s:%s;", "float", trim($vars->widget_position));
-                else $style .= "float:left;";
+                $widget_width_type = strtolower($vars->widget_width_type);
+                if(!$widget_width_type||!in_array($widget_width_type,array("px","%"))) $widget_width_type = "px";
+
+                $style .= sprintf("%s:%s%s;", "width", trim($vars->widget_width), $widget_width_type);
+
+                //if($vars->widget_position) $style .= sprintf("%s:%s;", "float", trim($vars->widget_position));
+                //else $style .= "float:left;";
                 $widget_code = sprintf('<img src="%s" class="zbxe_widget_output" widget="%s" %s style="%s" />', $blank_img_path, $widget, implode(' ',$attribute), $style);
             } else {
-                $widget_code = sprintf('<img width="100" height="100" src="%s" class="zbxe_widget_output" style="%s" widget="%s" %s />', $blank_img_path, $style, $widget, implode(' ',$attribute));
+                $widget_code = sprintf('<img width="%s" height="100" src="%s" class="zbxe_widget_output" style="%s" widget="%s" %s />', "100%", $blank_img_path, $style, $widget, implode(' ',$attribute));
             }
 
             $cache_path = './files/cache/widget_cache/';