Div containing textarea overlaps divs to the left and right - html

Question

I've got a dialog box made of a series of divs for the header, body and footer which are further subdivided into left, center and right sections each. Picture a tic tac toe board and you'll get the idea. For some reason, as soon as I put a textarea in the body center it overlaps the left and right body divs. The problem is occurring somewhere in the div section that uses the "con" classes.
Here's a picture of the problem: http://s8.postimage.org/fvlt9qi51/Dialog_Overlap.jpg
Edit: I managed to make it work by replacing height: 100% with height: 175px in the .con section of CSS. What I don't understand is why that looks ok, but height: 100% doesn't? The top level div that contains all the sub divs that make up the dialog has it's dimensions specified in pixels, as does the dialog header and footer. Why does the middle have to have an exact value specified as well? I'd rather not do it this way as it means I'll need a special CSS class for each dialog box so that a specific height value can be added to the middle of the dialog.
The HTML is below, CSS is after that.
<div class="ttl">
<div class="ttlt">
<div class="ttlt-l"></div>
<div class="ttlt-m">
<a class="close" href="javascript:void(0);" onclick="cancelNotes();this.blur();return false;"></a>
<span>Create Note</span>
</div>
<div class="ttlt-r"></div>
</div>
<div class="ttlb">
<div class="ttlb-l"><span></span></div>
<div class="ttlb-m"><span></span></div>
<div class="ttlb-r"><span></span></div>
</div>
</div>
<div class="con">
<div class="con-l"></div>
<div class="">
<input type="hidden" id="hdnNoteID" />
<textarea id="txtNote" rows="11" cols="50"></textarea>
</div>
<div class="con-r"></div>
</div>
<div class="ftr">
<div class="ftr-l"></div>
<div class="ftr-m">
<a onclick="cancelNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Cancel</span></a>
<a onclick="addNotes();this.blur();return false;" href="javascript:void(0);" class="btn"><span>Add Note</span></a>
</div>
<div class="ftr-r"></div>
</div>
CSS
/* Title Bar */
.ttl { width:100%;height:38px; }
/* Close button */
.ttl a { margin-top:4px;display:block;float:right;width:23px;height:21px;background:transparent url("img/dialog/static.png") no-repeat -18px 0;cursor:default; }
.ttl a:hover { background-position:-18px -21px; }
.ttl a:active { background-position:-18px -42px;outline:none; }
.ttlt { width:100%;height:30px; }
.ttlt-l { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat;float:left; }
/* ttlt-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlt-m { width:432px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mWide { width:632px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-mExtraWide { width:930px;height:30px;background:#000 url("img/dialog/horizontal.png") repeat-x;float:left; }
.ttlt-r { width:9px;height:30px;background:transparent url("img/dialog/static.png") no-repeat -9px 0;float:left; }
.ttlt span { cursor:inherit;margin-left:4px;line-height:30px;color:#fff;font-weight:bold;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; }
.ttlb { width:100%;height:8px; }
.ttlb span { display:none; }
.ttlb-l { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat 0 -30px;float:left; }
/* ttlb-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ttlb-m { width:432px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mWide { width:632px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-mExtraWide { width:930px;height:8px;background:#fff url("img/dialog/horizontal.png") repeat-x 0 -67px;float:left; }
.ttlb-r { width:9px;height:8px;background:#000 url("img/dialog/static.png") no-repeat -9px -30px;float:left; }
.tabbed .ttlb-l { background-position:0 -38px; }
.tabbed .ttlb-m { background-position:0 -75px; }
.tabbed .ttlb-r { background-position:-9px -38px; }
/* Body */
.con { width:100%;height:100%;background-color:#fff;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; cle}
.con-l { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y;float:left; }
/* con-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.con-m { width:432px;height:100%;background-color:#fff;float:left; }
.con-m .top { margin-top:2px; }
.con-mWide { width:632px;height:100%;background-color:#fff;float:left; }
.con-mExtraWide { width:930px;height:100%;background-color:#fff;float:left; }
.con-r { width:9px;height:100%;background:#000 url("img/dialog/vertical.png") repeat-y -9px 0;float:left; }
/* Dialogue footer */
.ftr { width:100%;height:37px;font-family:Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;font-size:11px; clear: left;}
.ftr-l { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat 0 -75px;float:left; }
/* ftr-m width is dialogue width (450px) - 18px (the left & right divs are 9px each) */
.ftr-m { width:432px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mWide { width:632px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-mExtraWide { width:930px;height:37px;background:#eee url("img/dialog/horizontal.png") repeat-x 0 -30px;float:left; }
.ftr-r { width:9px;height:37px;background:transparent url("img/dialog/static.png") no-repeat -9px -75px;float:left; }

Answer 1

It is hard to help there without access to real thing.
Block .con and its left and right parts have height:100%. This will work only if they parent have height in pixels. Now this left and right parts invisible, because they have height 0. It will be simpler to help if you will provide html and css for outer div for this blocks. Try to set fixed height for it like 300px.
Also I can suggest dirty workaround. Add this css after your styles:
.con {
border:9px solid #000;
border-width:0 9px;
padding:0 9px;
width:auto;
}