twilitegxa Posted December 15, 2010 Share Posted December 15, 2010 I have a page with a page wrap that contains the page to only 800px, and I have a div below that that I want to repeat to be as tall as the content of the page. Right now I am setting a fixed height, but is there a way to set the height to fill to that height automatically, such as with a percentage or something? Here is my code so far: (I need the main-content div to repeat to the end of the left-col and right-col, if that makes sense) <!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=UTF-8" /> <title>Untitled Document</title> <style> * { margin: 0; padding: 0; } body { background: #000000; color: #FFFFFF; /*background: url(red_back2.png) #000000 top repeat-x;*/ font-size: 62.5%; font-family: Helvetica, sans-serif; } ul#nav { height:504px; width:780px; background: url(images/main-img2.jpg) no-repeat; } img { border: none; } ul#nav li a { display: block; float: left; width: 73px; margin-left: 14px; } ul#nav li { list-style: none; } ul#boxes li { list-style: none; float: left; width: 150px; margin-left: 35px; margin-top: 0px; } div#logo { height: 71px; width: 324px; float: left; background: url(images/logo.jpg) no-repeat; } div#page-wrap { width: 800px; margin: 0 auto; } div#red_back { background: url(images/red_back.png) repeat-x; height: 269px; margin-top: -269px; margin-left: -27px; } div#red_boxes { height: 269px; margin-top: 163px; display: block; } #headline-img { height: 26px; margin-left: 600px; margin-top: -188px; } ul#boxes { margin-top: -205px; z-index: 2; position: absolute; width: 800px; margin-left: -15px; } ul#boxes li { margin-right: 10px; } ul#boxes li.box1 img.read1, ul#boxes li.box2 img.read2, ul#boxes li.box3 img.read3, ul#boxes li.box4 img.read4 { margin-top: 10px; margin-left: 70px; } div#main-content { background: url(main_back.png) repeat; height: 1000px; } div#left-col img.title_img { float: left; padding-right: 780px; padding-bottom: 25px; padding-top: 25px; } div#left-col { float: left; background: url(left-col_back.png) repeat; width: 780px; font-size: 1.5em; padding-bottom: 50px; } </style> </head> <body> <div id="page-wrap"> <a href="index.html"><div id="logo"><></a> <ul id="nav"> <li><a href="home.html"><img src="images/home_selected.png" alt="Home" /></a></li> <li><a href="about.html"><img src="images/about.png" alt="About" /></a></li> <li><a href="services.html"><img src="images/services.png" alt="Services" /></a></li> <li><a href="contact.html"><img src="images/contact.png" alt="Contact" /></a></li> </ul> <div id="headline-img"><a href="#"><img src="images/headline_img.jpg" alt="Learn More" /></a><> <div id="red_boxes"><img src="images/red_boxes2.png" alt="" /> <ul id="boxes"> <li class="box1"><p>Whether you live in an apartment, a residential home or a condominium, the possibility of water damage is very real. Even offices and commercial buildings are subject to water damage, especially damage due to faulty pipes, leakages or flooding. Water damage is indeed a very serious issue, especially if the water is contaminated with sewage or chemicals.</p><a href="water-damage.html#main"><img src="read_more1.jpg" class="read1" /></a></li> <li class="box2"><p>Have you recently been facing respiratory problems such as wheezing or difficulty breathing? Do your burning, watery eyes worry you? Have you found that skin irritation, pains and aches are becoming regular problems for you? If the answer to any of these questions is yes, then you should consider hiring a mold removal company to conduct a mold inspection. </p><a href="mold-remediation.html#main"><img src="read_more2.jpg" class="read2" /></a></li> <li class="box3"><p>Water damage cleanup must be undertaken immediately when floods, faulty pipes or water leaks afflict your home or office. Such water-related catastrophes can cause extensive damage to furnishings and flooring, particularly carpeting. The effects of unchecked water seeping through walls and floors and damaging furniture and upholstery can be devastating. </p><a href="water-damage-cleanup.html#main"><img src="read_more3.jpg" class="read3" /></a></li> <li class="box4"><p>Carpets are perhaps the most aesthetically important objects that you can add to your apartment. Carpets come in many varieties and a wide range of prices. Unfortunately, there are also many ways in which carpets can get stained. Usually, you treat these stains as soon as they turn up, or you leave it in the hands of professional cleaners.</p><a href="carpet-cleaning.html#main"><img src="read_more4.jpg" class="read4" /></a></li> </ul> <><!-- END RED_BOXES --> <div id="left-col"> <img src="home_title.png" class="title_img" alt="Home" /> <p>This is where the home page content will go.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet lectus ac elit vulputate ullamcorper. In mattis quam lorem. In nec nibh nec magna malesuada fringilla. Maecenas augue lacus, cursus id luctus id, dignissim vitae ipsum. Maecenas accumsan consequat ligula tempor cursus. Sed pellentesque mauris mi. Sed sit amet neque vel magna gravida auctor et a nunc. Duis quis diam enim. Curabitur vel ipsum elit. Donec porttitor ultrices tortor at dignissim. Vivamus accumsan est ut dui fringilla vestibulum. Quisque est magna, facilisis sit amet laoreet rutrum, facilisis luctus augue. Aenean lobortis varius aliquet. Ut ornare libero lobortis felis hendrerit adipiscing. Aenean urna quam, condimentum nec aliquam tincidunt, tincidunt at augue. Nullam hendrerit ullamcorper arcu elementum adipiscing. Duis accumsan, felis sed eleifend mollis, lacus purus eleifend velit, et sodales diam elit eu quam. </p> <p>Cras ultricies ipsum consequat nisi tristique congue. Suspendisse potenti. Proin laoreet tempor scelerisque. Nunc lacus nisi, malesuada sed sollicitudin sed, tincidunt a enim. Etiam eget lacus non libero consequat elementum. Quisque dui nibh, blandit quis congue quis, auctor sed metus. Sed non lacus tellus. Maecenas molestie lectus ac arcu ornare aliquet. Etiam tortor nisl, gravida et ullamcorper nec, auctor quis orci. Pellentesque nisi est, pellentesque vitae ultrices ut, facilisis at neque. Nulla consequat dui eget eros fringilla vitae sodales neque accumsan. Vestibulum hendrerit, purus ac facilisis ornare, lectus risus posuere odio, eu commodo nisl lacus vitae felis. Duis id magna tortor, vitae eleifend justo. Nunc pulvinar tincidunt consectetur. Fusce dictum, ante eget imperdiet adipiscing, erat ante sodales orci, non dignissim sem lorem sed lacus. Sed cursus augue et enim aliquet vehicula. Aenean auctor nulla ut sem ullamcorper aliquam. Fusce dui urna, ultrices a mollis at, porttitor eu dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p> <p>Morbi mauris turpis, molestie ut rutrum non, pharetra ut mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dui turpis, scelerisque non malesuada non, vestibulum ac augue. Suspendisse tristique, massa ut dapibus ullamcorper, purus velit accumsan lectus, et ultrices augue libero at quam. Praesent nibh orci, facilisis ut gravida non, aliquet nec purus. Cras at risus massa. Maecenas bibendum fermentum leo vel rutrum. Etiam pulvinar sollicitudin leo, vel tincidunt massa dapibus sit amet. Nunc ultricies, augue pulvinar consequat scelerisque, leo turpis bibendum mi, eget dapibus neque nibh ut felis. In id blandit augue. </p> <p>Praesent euismod interdum orci mattis porttitor. Donec suscipit blandit nunc, eu ultricies augue viverra non. Praesent augue nulla, consectetur ac rhoncus vitae, vestibulum ac arcu. Vivamus sed cursus leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam et nulla at ante aliquet venenatis eget sit amet sem. Aliquam bibendum malesuada leo a semper. Proin consectetur velit dui, vitae fermentum tellus. Suspendisse tempor auctor accumsan. Mauris leo erat, vehicula in interdum in, suscipit vel sapien. Nullam adipiscing convallis sapien, eu dignissim augue scelerisque vel. Cras vitae tellus quis est faucibus ornare. Nunc metus est, pellentesque at bibendum at, malesuada non lectus. Ut sed lorem id orci interdum lobortis. Etiam ut tincidunt erat. </p> <p>Curabitur in placerat mi. Sed ut vehicula nibh. Suspendisse cursus tempus justo. Cras accumsan mi at diam condimentum vehicula. Maecenas eu ultrices purus. Proin vehicula facilisis leo sit amet dignissim. Cras quam mi, blandit et convallis ut, auctor sed dui. Donec eget nisi tortor. Donec adipiscing felis ligula. Vivamus ut ante dui, nec tristique urna. Nullam sagittis tincidunt venenatis. Proin sed sapien sit amet ante auctor bibendum. Vestibulum lacus arcu, ultricies vitae placerat in, ultrices non purus. Vestibulum tincidunt nisl id est tincidunt ac adipiscing dui ullamcorper. Sed placerat massa at nisi cursus in dapibus velit ultricies. Vestibulum sed nisi id dolor rutrum tempor eu quis ante. Aenean sit amet elit quis nisi consectetur laoreet.</p> <><!-- END LEFT-COL --> <div id="right-col"> <><!-- END RIGHT-COL --> <><!-- END PAGE-WRAP--> <div id="red_back"><> <div id="main-content"> <><!-- END MAIN-CONTENT --> </body> </html> Can anyone help? Quote Link to comment https://forums.phpfreaks.com/topic/221722-making-div-repeat-to-size-of-content-in-another-div-with-wrapper/ Share on other sites More sharing options...
haku Posted December 18, 2010 Share Posted December 18, 2010 It was a little difficult to understand what you were asking exactly, but I'm thinking you maybe want a stickyfooter? http://www.cssstickyfooter.com/ Quote Link to comment https://forums.phpfreaks.com/topic/221722-making-div-repeat-to-size-of-content-in-another-div-with-wrapper/#findComment-1148889 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.