Jump to content

Stretching a text box vertically


mghayes82
 Share

Recommended Posts

Hi,I'm trying to get a text box with a background image to stretch so that it automatically resizes for the amount of text in it. At the same time I want the footer to drop down so it remains at the bottom. I don't want a scroll bar to appear on the side of text box. I just want to lengthen it to accomodate the amount of text. <div id="text"> is the box I want to lengthen. Thanks.

CSS/* CSS Document */body{	text-align: center;	background-color: #000000;	margin:0px;	padding:0;}div#container{	position: relative;	margin: 0 auto 0 auto;	padding: 0;	width: 750px;}div#header{	position: relative;	background-color: #fff;	margin: 0;	padding: 0;	margin-bottom: 0px;	height: inherit;}div#greenline{	height: 8px}div#title{	position: relative;	background-color: #fff;	margin: 0;	padding: 0;}div#content{	position: relative;	background-color: #1D1102;	margin: 0;	padding: 0;	width: 750px;}	p.leftmargin {	color:#139388;	margin-right: 0cm;	text-align:left;	background-image: url(../images/sgr_nav_home.jpg);	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	font-style: normal;	background-position: left top;	}		.style1 {	color: #139388;	font-family: Georgia, "Times New Roman", Times, serif;	font-size: 90%;	font-weight: 400;	font-style: normal;	margin-left: -15px;		}		ul#sub1 {color:#76CEBC;		font-family: Georgia, "Times New Roman", Times, serif;		font-size: 85%;		font-weight: 400;		font-style: normal;		}				div#navigation	{	position:relative;	float: left;	width: 175px;	height:462px;	background-image: url(../images/sgr_nav.jpg);	background-position: left top;	background-repeat: repeat-y;	}					div#body	{	float: right;	width: 575px;	height:462px;	background-image:url(../images/sgr_body.jpg);	margin: 0;	padding-top: 0;	padding-right: px;	padding-bottom: 0;	padding-left: 0;	background-repeat: repeat-y;	}			div#images		{		float:right;		width:575px;		height:221px;		margin:0;		padding-top: 0;		padding-right: 0px;		padding-bottom: 0;		padding-left: 0;				}				div#text		{		float:right;		width:575px;		height:241px;		background-image:url(../images/sgr_text.jpg);		margin:0;		padding-top: 0;		padding-right: 0px;		padding-bottom: 0;		padding-left: 0;				}			.h1 {				color: #139388;				font-family: Georgia, "Times New Roman", Times, serif;				font-size: 90%;				font-weight: bold;				font-style: normal;				text-align:left;				padding-top:0px;					}									.h2 {				color: #76CEBC;				font-family: Georgia, "Times New Roman", Times, serif;				font-size: 150%;				font-weight: 400;				font-style: normal;				text-align:left;				line-height: 0px;					}									.p {				color:#76CEBC;				font-family: Georgia, "Times New Roman", Times, serif;				font-size: 90%;				font-weight: 400;				font-style: normal;				text-align:left;				padding-top:0px;				}				div#footer{	position: relative; 	clear: both;	background-color: #fff;}

HTML<body>	<div id="container">		<div id="header">			<img src="images/sgr_header.jpg" alt="header" width="750" height="104" border="0" align="left" />	  </div>		<div id="greenline">		</div>		<div id="content">			<div id="navigation">					  <ul class='level1'>						<li class='submenu style1'>						  <div align="left">About Sweetgrass Rods							<ul class='level2' id='sub1'>							  <li>Why We Are Different</li>							  <li>Crafted in Twin Bridges</li>							  <li>Our Commitment</li>							</ul>						  </div>						</li>						<li class='submenu style1'>						  <div align="left">The Boo Boys							<ul class='level2' id='sub1'>							  <li>Meet the Boo Boys</li>							  <li>Our Legacy</li>							  <li>Our Philosophy</li>							</ul>						  </div>						</li>						<li class='submenu style1'>						  <div align="left">Hand Crafted Fly Rods							<ul class='level2' id='sub1'>							  <li>About out Boo</li>							  <li>About Our Rods</li>							  <li>Crafting Your Fly Rod</li>							</ul>						  </div>						</li>						<li class='submenu style1'>						  <div align="left">Order Your Fly Rod							<ul class='level2' id='sub1'>							  <li>Pricing, Quotes & Deposit</li>							  <li>Delivery Timing</li>							  <li>Shipping Options</li>							</ul>						  </div>						</li>						<li class="style1">						  <div align="left">Great Fly Rod Stuff</div>						</li>						<li class="style1">						  <div align="left">Fly Rod Repairs</div>						</li>						<li class='submenu style1'>						  <div align="left">Fly Rod Memories							<ul class='level2' id='sub1'>							  <li>Share Photos & Stories</li>							  <li>Photo Gallery</li>							  <li>Featured Fish Tale</li>							</ul>						  </div>						</li>						<li class="style1">						  <div align="left">Contact Us</div>						</li>					  </ul>							</div>					  <div id="body">				<div id="images">					<img src="images/sgr_img_about_diff.jpg" alt="body" width="575" height="221" border="0" float="right" />				</div>				<div id="text">					<h1 class="h1">About Sweetgrass Rods</h1>					<h2 class="h2">Why We Are Different</h2>					<p class="p">There are so many wonderful rod makers around the country these days. Sweetgrass Rods does not presume that anything the company builds will be better than what can be found within this gathering of great craftsmen. What makes Sweetgrass Rods different is the eighty years of collective experience that the team brings to each and every rod built. And since fly fishing is a way of life in the Twin Bridges area, in many ways, this influence permeates everything we do.</p><p class="p">It is our intention to do our share to preserve the traditions of a unique American craft. In an age where time is money and more cheaply produced outsourced goods rule the corporate world, we believe there is still a place for quality craftsmanship done the old fashioned way. What we build will have a heart, soul, and spirit connected to our sense of history, community, and obligation to the resource that makes what we do possible.</p><p></p>			</div>		  </div>		</div>		<div id="footer">			<img src="images/sgr_footer.gif" alt="footer" width="750" height="38" border="0" align="left" />		</div>	</div></body></html>

Link to comment
Share on other sites

What browser are you using? I got pretty strange and wildly different layouts between FF and IE7. Stuff shooting off to the right, footer at the top. So couldn't really be sure what it was meant to be like.Coupla points to try and help along the way: (a) Add missing number to padding-right: px; in div#body(:) Try height:auto in div#text.

Link to comment
Share on other sites

What browser are you using? I got pretty strange and wildly different layouts between FF and IE7. Stuff shooting off to the right, footer at the top. So couldn't really be sure what it was meant to be like.Coupla points to try and help along the way: (a) Add missing number to padding-right: px; in div#body(:) Try height:auto in div#text.
Thanks for the suggestion!I gave it try and it didn't work for me. I started looking through the code line by line and found a "float:right;" command on an image that was above the text box. After removing the "float" command, it worked perfectly. Thanks!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...