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>
