mghayes82 Posted December 15, 2006 Share Posted December 15, 2006 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 More sharing options...
Reg Edit Posted December 18, 2006 Share Posted December 18, 2006 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 More sharing options...
mghayes82 Posted December 18, 2006 Author Share Posted December 18, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now