URL: http://www.uuilliam.net/box

Problem: Pretty obvious, It doesn't show as I wish.

What I want: I want the content to expand both Vertically and horizontally using the images as the border

demo of what I want:

css:

@charset "utf-8";
/* CSS Document */
.box {
    min-width:20em;
    min-heigh:20em;
}
.1 {
    background:url(images/top_corner_left.png) no-repeat;
    height:32px;
    width:15px;
    float:left;
}
.dot {
    background:url(images/dot_stretch.png) repeat-x;
    height:27px;
    width:4px;
    float:left;
    }
.name {
    background:url(images/content_name.png) repeat-x;
    height:32px;
    width:4px;
    float:left;
}
.2 {
    background:url(images/x.png) no-repeat;
    height:32px;
    width:20px;
    float:left;
}
.3 {
    background:url(images/edge_left_y.png) repeat-y;
    height:1px;
    width:9px;
}
.4 {
    background:url(images/edge_right_y.png) repeat-y;
    height:1px;
    width:8px;
}
.5 {
    background:url(images/bottom_corner_left.png) no-repeat;
    height:15px;
    width:14px;
}
.6 {
    background:url(images/bottom_width_x.png) repeat-x;
    height:9px;
    width:1px;
}
.7 {
    background:url(images/bottom_corner_right.png) no-repeat;
    height:14px;
    width:14px;
}

.top {
    height:32px;
}

html:

<div class="box">
<div class="top">
<div class="1" />
<div class="dot" />
<div class="name">
<!--type name here!-->
Name
</div>
<div class="dot" />
<div class="2" />
</div>

<div class="3" />
<div class="content"> 
<!--type content here!-->
Some content here
</div>
<div class="4" />
<div class="5" />
<div class="6" />
<div class="7" />
</div>

that was not a tutorial, I was asking for advice.

sorry.