I'm having the worst time trying to get this to work with DIV & CSS. Normally I could mess around with tables and do this, but I'm trying to force myself to stop using such an ugly method for building web pages.

Could someone help show me how to get it so that when I enter more text into the text body it will auto stretch the text area? I know it's got to be something simple I'm over looking.


<pre id=code><font face=courier size=2 id=code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
body {
background-image: url();
background-repeat: no-repeat;
background-color: #2A5F00;
}
#Layer1 {
position:absolute;
left:56px;
top:25px;
width:800px;
height:173px;
z-index:1;
background-color: #010000;
background-image: url(images/Untitled-1.jpg);
}
#Layer2 {
position:absolute;
left:57px;
top:187px;
width:170px;
height:491px;
z-index:2;
background-color: #EEEAD1;
}
#Layer3 {
position:absolute;
left:226px;
top:157px;
width:650px;
height:auto;
z-index:3;
background-color: #FFFFFF;
}
#Layer4 {
position:absolute;
left:55px;
top:22px;
width:180px;
height:198px;
z-index:4;
background-image: url(images/Golfer1_Finished.jpg);
}
.textbody {
text-indent: 15px;
overflow: visible;
bottom: 5px;
text-align: left;
height: auto;
}
#Layer6 {
position:absolute;
left:246px;
top:150px;
width:409px;
height:22px;
z-index:5;
}
#Layer7 {
position:absolute;
left:669px;
top:150px;
width:202px;
height:22px;
z-index:6;
}
.style1 {font-size: 12px}
.style2 {
font-size: 24px;
font-weight: bold;
font-style: italic;
color: #2A5F00;
}

--&gt;
&lt;/style&gt;

&lt;script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
gCurvyCorners[0]="Layer1,10,10,10,10,0,0";
gCurvyCorners[1]="Layer3,10,10,10,10,0,0";
gCurvyCorners[2]="Layer2,10,1,10,1,0,0";
//--&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="Layer1"&gt;&lt;/div&gt;
&lt;div id="Layer2"&gt;&lt;/div&gt;
&lt;div class="textbody" id="Layer3"&gt;
&lt;p&gt;&nbsp;&lt;/p&gt;
&lt;p&gt;&nbsp;&lt;/p&gt;
&lt;p&gt;asdfsadfsdfasd asdf sadf sadf safsa sdfsafasfj klsfkl jsfjksj dfklsjfk ljsdfjskfjklsj fklsjfklsdjfklsjfklsjklfjsklfjskfsjfklsjkljskdljfklsdjfklsjfklsjfklsajkflsjlkfjsklfjlksda&lt;/p&gt;
&lt;p&gt;&nbsp;&lt;/p&gt;
&lt;p&gt;sfsfk sdkl;f ksl;fksl;dfkl;skfl;skfl;kflskfkafksakf';kf'skdkfk kld;fk f dkl;f dfk;l dfak;lf asdfksald;fkas ff sad;fl fd k;lasdfk asdf;asflksdf asdf sadf &lt;/p&gt;
&lt;p&gt;asdf&lt;/p&gt;
&lt;p&gt;asf&lt;/p&gt;
&lt;p&gt;saf&lt;/p&gt;
&lt;p&gt;safs&lt;/p&gt;
&lt;p&gt;dsasdf&lt;/p&gt;
&lt;p&gt;a&lt;/p&gt;
&lt;p&gt;asfs&lt;/p&gt;
&lt;p&gt;dfsa&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;sfd&lt;/p&gt;
&lt;p&gt;saf&lt;/p&gt;
&lt;p&gt;sf&lt;/p&gt;
&lt;p&gt;&nbsp;&lt;/p&gt;
&lt;/div&gt;
&lt;div class="style2" id="Layer6"&gt;This is a Page Title &lt;/div&gt;
&lt;div id="Layer7"&gt;
&lt;div align="right" class="style1"&gt;Why Us?&nbsp; | &nbsp;Contact Us &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</font id=code></pre id=code>