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>

I think the layers could be an issue - try having one div, then within that put your paragraphs

Think 'containers' so a div is a container that can hold lots of other things, and any of those can be nested divs too.

A useful thing is to use firefox and the developer's toolbar - it lets you see and edit the css dynamically so you can see exactly what happens as you change things