auto-stretch the text body height??

joshlindem · May 2nd, 2008, 20:57

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 information into the text body it will auto stretch the text area (height)? I know it's got to be something simple I'm over looking.

Here's my code (not pretty, but that gets cleaned up and properly named once I figure this out) You should be able to cut & paste into a editor and see what I'm doing.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
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;
}-->
</style>
<script type="text/javascript" src="vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
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";
//-->
</script>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2"></div>
<div class="textbody" id="Layer3">
  <p> </p>
  <p> </p>
  <p>asdfsadfsdfasd asdf sadf sadf safsa sdfsafasfj klsfkl jsfjksj dfklsjfk ljsdfjskfjklsj fklsjfklsdjfklsjfklsjklfjsklfjskfsjfklsjkljskdljfklsdjfklsjfklsjfklsajkflsjlkfjsklfjlksda</p>
  <p> </p>
  <p>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  </p>
  <p>asdf</p>
  <p>asf</p>
  <p>saf</p>
  <p>safs</p>
  <p>dsasdf</p>
  <p>a</p>
  <p>asfs</p>
  <p>dfsa</p>
  <p>sf</p>
  <p>sf</p>
  <p>sf</p>
  <p>sf</p>
  <p>sf</p>
  <p>sfd</p>
  <p>saf</p>
  <p>sf</p>
  <p> </p>
</div>
<div class="style2" id="Layer6">This is a Page Title </div>
<div id="Layer7">
  <div align="right" class="style1">Why Us?  |  Contact Us </div>
</div>
</body>
</html>

dab42pat · May 2nd, 2008, 21:12

Try this

HTML: Select all

  .textbody {
        text-indent: 15px;
        overflow: visible;
        
        text-align: left;
        height: auto;
    }

works in ff not sure about ie

Pat

joshlindem · May 2nd, 2008, 21:31

kewl, thank you!!

That seems to have done the trick. Not sure why I didn't try that one before?
oh well, it's working now.

Seems to be working in both FF and IE (IE as long as 'Mark of the Web' code is installed)

Thanks!

dab42pat · May 2nd, 2008, 21:44

excellent, ie is a Pain in the Ar##