ayqazi Posted February 3, 2009 Share Posted February 3, 2009 Hi,So I've got this page where there's a 'panel' and the main contents. The panel is floated left and given a width of 20%, the main contents are simply given a margin-left of 80%. There's a footer at the bottom.Now, the thing is that I want the left-floated 'panel' to have a different background colour, and for that colour to stretch right down to above the footer. I've tried height: 100%, and bottom: 0, but neither work. I'm obviously missing something here.So, in the following web page, I want the purple colour of the left-panel to reach all the way down to just above the copyright notice. Note: I've included the css inside the html itself for ease - I don't actually do that for real!http://fuzzy.qazi.eu/test-html.htmlCould anyone advice me as to how I can achieve this?Thanks in advance Link to comment Share on other sites More sharing options...
eXo Posted February 3, 2009 Share Posted February 3, 2009 You have to tell what 100% is, so if you add this to your css body, html{width: 100%; height: 100%;} then you can give your panel for example a height of 90% and ur footer a height of 10% Link to comment Share on other sites More sharing options...
jlhaslip Posted February 3, 2009 Share Posted February 3, 2009 Google faux columns to achieve that effect Link to comment Share on other sites More sharing options...
ayqazi Posted February 3, 2009 Author Share Posted February 3, 2009 Found the answer, thanks. It's annoying when I search lots on the Google-web, but the one phrase that would get me my results escapes me :-) Link to comment Share on other sites More sharing options...
Enthusiastic Student Posted February 3, 2009 Share Posted February 3, 2009 Hi Asfand Yar QaziYou can also 'cheat' and use java script: <script type="text/javascript"> function setH() { obj1=document.getElementById('Menu'); obj2=document.getElementById('Content'); H=Math.max(obj1.offsetHeight,obj2.offsetHeight); obj1.style.height=H+'px'; obj2.style.height=H+'px'; } window.onload=setH;</script> The script simply finds the largest height value of the Menu and the Content divs. Then it sets both divs to have this height in pixels.Hope it helpsEnthusiastic Student Link to comment Share on other sites More sharing options...
pbifaro Posted February 5, 2009 Share Posted February 5, 2009 Hi Asfand Yar QaziYou can also 'cheat' and use java script:<script type="text/javascript"> function setH() { obj1=document.getElementById('Menu'); obj2=document.getElementById('Content'); H=Math.max(obj1.offsetHeight,obj2.offsetHeight); obj1.style.height=H+'px'; obj2.style.height=H+'px'; } window.onload=setH;</script> The script simply finds the largest height value of the Menu and the Content divs. Then it sets both divs to have this height in pixels.Hope it helpsEnthusiastic Student Link to comment Share on other sites More sharing options...
pbifaro Posted February 5, 2009 Share Posted February 5, 2009 I've run into the same problem and tried to use the faux column fix for my pages. The problem is Now it works in IE, but not in FireFox and Safari.<!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><link href="styles.css" rel="stylesheet" type="text/css" /></head><body><div id="top"><img src="top.jpg" width="800" height="115" /></div><div id="wrap"> <div id="left"> <div id="left_top"> <div id="left_grey"> <h1 class="lb_blk_hdr">Water. Pure and Simple</h1> <p class="text">United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in <a href="brandpg.html" target="_self" class="text">water treatment</a> technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your <a href="home_solutions.html" target="_self" class="text">Home</a>, <a href="office.html" target="_self" class="text">Office</a>, <a href="food_service.html" target="_self" class="text">Restaurant /Food Service</a> and <a href="medical.html" target="_self" class="text">Medical Facilities</a> and <a href="commercial_ind.html" target="_self" class="text">Commercial/Industrial facilities</a>. </p> <p class="text">Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p> <p class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p> <h1 class="lb_blk_hdr">Our Promise to You...</h1> <p class="text">We are committed to market innovative and creative <a href="brandpg.html" target="_self" class="text">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p> </div> </div> <div id="left_bot"> <p><span class="lg_blue_hdr">Our Guarantee</span></p> <p class="text"> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p> </div> </div> <div id="right"> <div id="fla"><img src="fla.gif" width="430" height="380" /></div> <div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div> </div> <div id="bottom">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div></div></body></html>styles:@charset "utf-8";body { background: #EEEEE4;}.lg_blue_hdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000066; line-height: 10px;}.lb_blk_hdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000000; line-height: 10px;}.text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 17px; color: #000000;}a.text:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #003366; text-decoration: underline;}a.text:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #009900; text-decoration: underline;}#wrap { background: url(blue_white_bkgd.gif) repeat-y 50% 0%; margin: 0px auto auto; padding: 0px; width: 800px;}#top { margin: 0px auto; padding: 0px; width: 800px;}#left { margin: 0px; padding: 0px; float: left; width: 370px; background: url(none);}#left_top { background: D9DAD5 repeat-y 50% 0%; margin: 0px; padding: 0px; width: 370px;}#left_grey { background: #D9DAD5; margin: 0px; padding: 15px; width: 340px;}#left_bot { margin: 0px; padding: 15px; width: 340px;}#right { margin: 0px; padding: 0px; float: right; width: 430px;}#bottom { background: #000000; float: left; width: 770px; margin: 0px; padding: 15px;} Link to comment Share on other sites More sharing options...
pbifaro Posted February 5, 2009 Share Posted February 5, 2009 I've run into the same problem and tried to use the faux column fix for my pages. The problem is Now it works in IE, but not in FireFox and Safari.I would like to test the Java script way but not sure where to put it???<!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><link href="styles.css" rel="stylesheet" type="text/css" /></head><body><div id="top"><img src="top.jpg" width="800" height="115" /></div><div id="wrap"> <div id="left"> <div id="left_top"> <div id="left_grey"> <h1 class="lb_blk_hdr">Water. Pure and Simple</h1> <p class="text">United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in <a href="brandpg.html" target="_self" class="text">water treatment</a> technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your <a href="home_solutions.html" target="_self" class="text">Home</a>, <a href="office.html" target="_self" class="text">Office</a>, <a href="food_service.html" target="_self" class="text">Restaurant /Food Service</a> and <a href="medical.html" target="_self" class="text">Medical Facilities</a> and <a href="commercial_ind.html" target="_self" class="text">Commercial/Industrial facilities</a>. </p> <p class="text">Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p> <p class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p> <h1 class="lb_blk_hdr">Our Promise to You...</h1> <p class="text">We are committed to market innovative and creative <a href="brandpg.html" target="_self" class="text">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p> </div> </div> <div id="left_bot"> <p><span class="lg_blue_hdr">Our Guarantee</span></p> <p class="text"> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p> </div> </div> <div id="right"> <div id="fla"><img src="fla.gif" width="430" height="380" /></div> <div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div> </div> <div id="bottom">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div></div></body></html>styles:@charset "utf-8";body { background: #EEEEE4;}.lg_blue_hdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000066; line-height: 10px;}.lb_blk_hdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #000000; line-height: 10px;}.text { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 17px; color: #000000;}a.text:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #003366; text-decoration: underline;}a.text:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #009900; text-decoration: underline;}#wrap { background: url(blue_white_bkgd.gif) repeat-y 50% 0%; margin: 0px auto auto; padding: 0px; width: 800px;}#top { margin: 0px auto; padding: 0px; width: 800px;}#left { margin: 0px; padding: 0px; float: left; width: 370px; background: url(none);}#left_top { background: D9DAD5 repeat-y 50% 0%; margin: 0px; padding: 0px; width: 370px;}#left_grey { background: #D9DAD5; margin: 0px; padding: 15px; width: 340px;}#left_bot { margin: 0px; padding: 15px; width: 340px;}#right { margin: 0px; padding: 0px; float: right; width: 430px;}#bottom { background: #000000; float: left; width: 770px; margin: 0px; padding: 15px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.