Jump to content

please help me make my inner container be 100%

jasonc

By jasonc
in CSS Help

 Share

Recommended Posts

jasonc Advanced Member

jasonc

Posted
Posted

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>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.