Jump to content

Make A Left-floated Div Have The Height Of Its Container


ayqazi
 Share

Recommended Posts

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

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

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

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

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

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...