jasonc Posted June 29, 2011 Share Posted June 29, 2011 I have tried to add 100% and 0 auto to the height but still can not get the grenn bordered area to be 100% in height. Can anyone suggest how this can be done ? <!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" xml:lang="en" lang="en"> <head> <title>Home - Welcome to our web site</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /*div { border: 1px solid blue; }*/ body { width: 1136px; margin: 0 auto; border: 0px solid brown;} .bodyContainer { float: left; border: 0px solid brown; width: 860px; } /* .header {background: url('images/Publication1.jpg') no-repeat center top; width: 100%; height: 75px; text-align: center; color: #693E38; font-size: 20pt; font-family: Broadway; border: 1px solid #EDB6B6; } /* #693e38 is (105,62,56) */ .header { margin: 0 auto; color: #693E38; font-family: Broadway; border: 0px solid #EDB6B6; } /* #693e38 is (105,62,56) */ .menu { width: 0 auto; text-align: center; font-size: 16pt; border: px solid #EDB6B6;} .subHeader{ font-weight: bold; text-decoration: underline; } .widthLimiter{ width: 100%; margin: 0 auto; } .menuwidthLimiter{ width: 100%; margin: auto; text-align: center; } /* width: 1200px; */ .content{ background: #EEEEEE; text-align: center; margin: auto; } .contentStyle{ border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 10px; height: auto !important; height: 400px; min-height: 400px; margin: auto; } .contentStyleForPrint{ border-left: 0px solid #DDD; border-right: 0px solid #DDD; height: auto !important; height: 400px; min-height: 400px; margin: auto; } ul{ list-style: none; padding: 0px; margin: 0px; } ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-colour: white; display: table; } ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; } ul#navbar li a { display:block; float:left;} a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; } a:hover{ color: #222; text-decoration: underline; } #navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ } #navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ } .adminmenu{ background: url('images/adminBarBgOutHover.png') repeat-x center; display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 3px 0px 3px; /* margin: 0px 5px 0px 5px; */ } .leftSideImagePanel { float: left; width: 130px; height: 100%; overflow: hidden; padding: 0px 8px 0 0; border: 0px solid #EDB6B6; } .rightSideImagePanel { float: left; width: 130px; height: 100%; overflow: hidden; padding: 0px 0 0 8px; border: 0px solid #999999; } form{ padding: 0px; margin: 0 auto; } .searchCategoryBox { border-right: 1px solid #EDB6B6; float: left; width: 130px; height: 100%; padding: 3px 3px 10px 10px; font-size: 9pt; } .results { border-top: 1px solid #F0F0F0; border-left: 1px solid #E5E5E5; border-right: 4px solid #E5E5E5; float: left; width: 695px; height: 100%; margin-left: 5px; margin: 3px; font-size: 9pt; } /*.resultsBackground { width: 100%; }*/ .successDiv{ border: 1px solid #41A808; background: #B9E57B; padding: 5px; margin-bottom: 5px; text-align: center; } .errorDiv{ border: 1px solid #A5260F; background: #E28B65; padding: 5px; margin-bottom: 5px; text-align: center; } .messageDiv { margin: 5px auto; width: 500px; border-radius: 15px; border: 1px solid #A5260F; background: #E28B65; text-align: center; } .message2Div { margin: 5px auto; width: 400px; border-radius:15px; border: 1px solid #A5260F; background: #E28B65; text-align: center; } .multiItemBoxes { border: 1px solid #E5E5E5; float: left; width: 155px; height: 180px auto; margin: 4px; padding: 4px; text-align: center; } .multiItemBoxesImg { border: 1px solid #F0F0F0; max-width: 130px; max-height: 100px; } .footerhosttext { color: #000; } .copyright { float: left; width: 33%; text-align: center; font-size:9pt; line-height: 16px; border: 0px dashed #000; } .footer { padding: 10px 0 5px 0; border-top: 1px solid #EDB6B6; width: 100%; font-size: 12pt; } .clearfloat { clear: both; } .productLineheight { line-height: 5px; } hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */ .catListLineHeight { line-height: 12px; } a.cat { text-decoration: none; } a.cat:link { color: grey; } a.cat:visited { color: grey; } a.cat:hover { color: black; } a.activeCat:link { color: blue; text-decoration: none; } .formWrapper{ margin: auto; border: 1px dashed #999; padding: 5px; text-align: left; } .field{ padding: 5px 0px 3px 10px; text-align: left; } .reviewfield{ padding: 10px 0px 1px 10px; font-weight: bold; } .emptyfield{ padding: 5px 0px 3px 10px; color: #FF0000; font-weight: bold; } .value{ padding: 5px 0px 3px 10px; text-align: left; } .other{ padding: 5px 0px 3px 0px; text-align: center; } </style> </head> <body> <!-- body container start --> <div style="float: left; width: 1140px; border: 1px solid brown;"> <!-- menu start --> <div class="menu"> <div class="menuwidthLimiter"> <ul id="navbar"> <li> <a href="index.php">Home</a> </li> <li> <a href="index.php">About us</a> </li> <li> <a href="index.php">Contact us</a> </li> <li> <a href="cart.php">View/Search our catalogue</a> </li> <li> <a href="cart.php">Place an order</a> </li> <li> <a href="cart.php?mycart=yes">View your cart</a> </li> </ul> </div> </div> <!-- menu end --> <div class="leftSideImagePanel"> <img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /></div> <!-- innerbodycontainer start --> <div style="float: left; width: 860px; height: 100%; border: 1px solid green;"> <!-- search start --> <form name="searchform" action="cart.php" method="post"> <div class="searchCategoryBox"> <p>Total items in cart: 0<br />Grand Total: £0.00p<br /><br /><a href="cart.php?mycart=yes">View Your Items</a></p> <hr class="smallDivider" /> <p><strong>Search categories</strong><br /><input title="Search" name="query" type="text" size="12" /><br /><input name="searchButton" type="submit" value="search" onclick="JavaScript:Minimum();" /></p> <p>or <strong>Select by category</strong></p> <a class="cat" href="cart.php?cat=2">2</a><br class="catListLineHeight" /></div> </form> <!-- search end --> <!-- results start --> <div style="border-bottom: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; float: left; width: 695px; height: 100%; margin-left: 5px; margin: 3px; font-size: 9pt;"> <!-- <div class="resultsBackground"> --> mess2 <br /> blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br /> <br /> <!-- </div> --> </div> <!-- results end --> </div> <!-- innerbodycontainer end --> <div class="rightSideImagePanel"> <img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /><img alt="" src="1.JPG" width="130" height="192" style="padding-top: 5px;" /></div> <!-- Footer start --> <br class="clearfloat" /> <div class="footer"> footer </div> <!-- <br class="clearfloat" /> --> </div><!-- end of pink --> </div> <!-- body container end --> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/240683-please-help-me-make-my-inner-container-be-100/ Share on other sites More sharing options...
sunfighter Posted June 30, 2011 Share Posted June 30, 2011 jasonc, look into sticky footers. See if this helps. Quote Link to comment https://forums.phpfreaks.com/topic/240683-please-help-me-make-my-inner-container-be-100/#findComment-1236933 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.