please help me make my inner container be 100%

jasonc · 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>

sunfighter · June 30, 2011

jasonc, look into sticky footers. See if this helps.

Sign In

please help me make my inner container be 100%

Recommended Posts

jasonc

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information