[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • Last Modified:

STREACH DIV CONTAINER TO 100% OF THE BROWSER

I WANT TO STREACH THE BODY TO THE 100% OF THE WINDOW EVEN IF THE CONTAINER IS EMPTY

HTML

<!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=iso-8859-1" />
<title>Package</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="fullsite">
<!--Header Background Part Starts -->
<div id="header-bg">
	<!--Header Contant Part Starts -->
	<div id="header">
		<a href="index.html"><img src="images/logo.gif" alt="Package" width="205" height="62" border="0" class="logo" title="Package" /></a>
		<!--Login Background Starts -->
		<div id="login-bg">
			<!--Login Area Starts -->
			<div id="login-area">
				<form action="" method="post" name="Login" id="Login">
					<label>Members Login:</label>
					<input type="text" name="username" id="username" />
					<input type="password" name="pass" id="pass" />
					<input type="image" src="images/login-btn.gif" class="login-btn" alt="Login" title="Login" />
					<br class="spacer" />
				</form>
			</div>
			<!--Login Area Ends -->
		</div>
		<!--Login Background Ends -->
		<br class="spacer" />
	</div>
	<!--Header Contant Part Ends -->
</div>
<!--Header Background Part Ends -->
<!--Navigation Background Part Starts -->
<div id="navigation-bg">
	<!--Navigation Part Starts -->
	<div id="navigation">
		<ul class="mainMenu">
			<li><a href="#" class="selectMenu" title="Home">Home</a></li>
			<li><a href="#" title="About">About</a></li>
			<li><a href="#" title="Services">Services</a></li>
			<li><a href="#" title="Support">Support</a></li>
			<li><a href="#" title="Chat">Chat</a></li>
			<li><a href="#" title="History">History</a></li>
			<li class="noBg"><a href="#" title="Contact">Contact</a></li>
		</ul>
		<a href="#" class="signup" title="signup now"></a>
		<br class="spacer" />
		<ul class="subNav">
			<li class="noBg"><a href="#" title="Our Benefits">Our Benefits</a></li>
			<li><a href="#" title="What Our Future Plans">What Our Future Plans</a></li>
			<li><a href="#" title="Our Success">Our Success</a></li>
			<li><a href="#" title="Ratings">Ratings</a></li>
			<li><a href="#" title="Latest Blogs">Latest Blogs</a></li>
			<li><a href="#" title="News">News</a></li>
			<li><a href="#" title="Testimonials">Testimonials</a></li>
			<li><a href="#" title="Comments">Comments</a></li>
		</ul>
		<br class="spacer" />
	</div>
	<!--Navigation Part Ends -->
</div>
<!--Navigation Background Part Ends -->
<!--Our Company Bacground Part Starts -->
<div id="ourCompany-bg">
	<!--Our Company Part Starts -->
	
	<!--Our Company Part Ends -->
</div>
<!--Our Company Bacground Part Ends -->
<!--Future Plans Part Starts -->
<div id="futurePlan-bg">
	<!--Future Plans Contant Part Starts -->
	<div id="futurePlanContant">
		<!--Projects 2007 Part Starts -->
		<div id="projPart">
			<h2 class="proj-hdr">Projects <span>2007</span></h2>
			<ul class="pic">
				<li><a href="#"><img src="images/future-pic-1.jpg" alt="Pic 1" title="Pic 1" width="82" height="74" /></a></li>
				<li><a href="#"><img src="images/future-pic-2.jpg" alt="Pic 2" title="Pic 2" width="82" height="74" /></a></li>
				<li class="noRightMargin"><a href="#"><img src="images/future-pic-3.jpg" alt="Pic 3" title="Pic 3" width="82" height="74" /></a></li>
			</ul>
			<br class="spacer" />
			<h3 class="sub-hdr">We Have For This year:</h3>
			<p>Quisque laoreet, elit at tincidunt porta, massa torr Porttitor magna, at vehicula pede dui id enim. Pellentesque</p>
			<a href="#" class="more-btn" title="READ MORE"></a>
		</div>
		<!--Projects 2007 Part Ends -->
		<!--Future Part Starts -->
		<div id="futurePart">
			<h2 class="future-hdr">Future Plans</h2>
			<h3 class="future-subHdr">Sed semper, enim id fringilla posuere</h3>
			<p>mauris diam dignissim magna, id ornare libero quam innvallis erat eu lectus. Aenean bibendum facilisis ante.</p>
			<p>Pellentesque id nunc at leo vestibulum lobortis. Integer luctus leo non felis. Proin in justo. Donec sapien enim, porta quis, aliquam sit amet, condimentum nonummy, lorem. Nullam mi metus, cursus in, porta vel, fringilla et, orci. Integer sit amet quam id turpis ultrices</p>
			<img src="images/future-img.gif" alt="Image" title="Image" width="127" height="141" />
			<br class="spacer" />
		</div>
		<!--Future Part Ends -->
		<br class="spacer" />
	</div>
	<!--Future Plans Contant Part Ends -->
</div>
<!--Footer Part Starts -->
<div id="footer-bg">
	<!--Footer Menu Part Starts -->
	<div id="footer-menu">
		<ul class="footMenu">
			<li class="noDivider"><a href="#" title="Home">Home</a></li>
			<li><a href="#" title="About">About</a></li>
			<li><a href="#" title="Services">Services</a></li>
			<li><a href="#" title="Support">Support</a></li>
			<li><a href="#" title="Chat">Chat</a></li>
			<li><a href="#" title="History">History</a></li>
			<li><a href="#" title="Contact">Contact</a></li>
		</ul>
		<br class="spacer" />
		<p class="copyright">Copyright &copy; Package 2007 All Rights Reserved</p>
		<p class="copyright topPad">Powered by <a href="http://www.templatekingdom.com/Web-Templates/Web-Design/" target="_blank" title="TemplateKingdom.com">TemplateKingdom.com</a></p>
	</div>
	<!--Footer Menu Part Ends -->
</div>
</div>
<!--Footer Part Ends -->
</body>
</html>

Open in new window


CSS

/* CSS DOCUMENT */

/*-------------------------- GENERAL --------------------------*/
html, body{
	padding:0; margin:0;
	font-family:Arial, Helvetica, sans-serif;
	height:100%;
	}
div, mg, p, a, ul, form, input, label, h2, h3{
	padding:0; margin:0;
	}
img{ border:none;}
a{ outline:none; text-decoration:none;}
ul{ list-style-type:none;}
.spacer{
	line-height:0; font-size:0; clear:both;
	}
div#fullsite{
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
	overflow:auto;
	}
/*-------------------------- HEADER --------------------------*/
div#header-bg{
	background:#2B0D0A url(images/header-bg.gif) 0 100% repeat-x;
	padding:32px 0 32px 0;
	color:#FCF7CC;
	}
div#header-bg div#header{
	width:922px; margin:0 auto;
	}
div#header-bg div#header img.logo{
	float:left; margin:2px 0 0 0;
	}

/*-------------------------- LOGIN AREA --------------------------*/
div#header-bg div#header div#login-bg{
	float:right; width:580px;
	background:url(images/login-middle-bg.gif) 0 0 repeat-x;
 	}
div#header-bg div#header div#login-bg div#login-area{
	width:580px;
	background:url(images/login-left-bg.gif) 0 0 no-repeat;
	}
div#header-bg div#header div#login-bg div#login-area form{
	width:557px; height:47px; padding:21px 0 0 23px;
	background:url(images/login-right-bg.gif) 100% 0 no-repeat;
	}
div#header-bg div#header div#login-bg div#login-area form label{
	background:url(images/login-icon.jpg) 0 2px no-repeat;
	line-height:25px; font-size:22px; color:#FCF7CC;
	padding:0 0 0 31px; float:left; margin:0 12px 0 0;
	background-color:inherit;
	}
div#header-bg div#header div#login-bg div#login-area form input{
	width:120px; height:18px; border:1px solid #924A43;
	background-color:#70322C; font-size:10px; color:#fff;
	line-height:10px; padding:5px 0 0 10px; float:left;
	margin:0 12px 0 0;
	}
div#header-bg div#header div#login-bg div#login-area form input.login-btn{
	width:52px; height:24px; border:none;
	background:none; padding:0; margin:1px 0 0 0;
	}
/*-------------------------- NAVIGATION PART --------------------------*/
div#navigation-bg{
	height:66px; background:url(images/navigation-bg.gif) 0 0 repeat-x;
	}
div#navigation-bg div#navigation{
	width:922px; margin:0 auto;
	}
div#navigation-bg div#navigation ul.mainMenu{
	padding:0; float:left; width:567px;
	}
div#navigation-bg div#navigation ul.mainMenu li{
	width:81px; float:left;
	background:url(images/navigation-divider.gif) 100% 0 no-repeat;
	}
div#navigation-bg div#navigation ul.mainMenu li a{
	width:80px; height:33px; display:block;
	line-height:33px; text-align:center;
	font-weight:bold; color:#FAF0C2; font-size:11px;
	background-color:inherit;
	}
div#navigation-bg div#navigation ul.mainMenu li a:hover{
	background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
	}
div#navigation-bg div#navigation ul.mainMenu li a.selectMenu{
	width:80px; height:33px; display:block;
	line-height:33px; text-align:center;
	font-weight:bold; color:#FAF0C2; font-size:11px;
	background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
	background-color:inherit;
	}

/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav{
	font:normal 11px/12px Arial, Helvetica, sans-serif;
	padding:4px 0 0 0;
	}
ul.subNav li{
	background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
	height:17px; float:left; padding:6px 0 0 0;
	}
ul.subNav li a{
	display:block; margin:0 22px 0 20px;
	color:#84915D;
	background-color:inherit;
	}
ul.subNav li a:hover{
	color:#fff;
	background-color:inherit;
	}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/

div#navigation-bg div#navigation a.signup{
	width:71px; height:28px; display:block;
	background:url(images/sign-up-btn.gif) 0 0 no-repeat;
	margin:2px 0 0 0; float:right; 
	}
div#navigation-bg div#navigation a.signup:hover{
	background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
	}

/*-------------------------- OUR COMPANIES MAIN FEATURES --------------------------*/
div#ourCompany-bg{
	background:#E7DFA0 url(images/our-company-bg.gif) 0 0 repeat-x;
	color:inherit;
	}
div#ourCompany-bg div#ourCompany-part{
	width:922px; margin:0 auto; padding:26px 0 28px 0;
	background:url(images/our-company-bg-pic.jpg) 606px 0 no-repeat;
	}
div#ourCompany-bg div#ourCompany-part h2.ourCompany-hdr{
	font:normal 35px/38px "Arial Narrow", Arial, Helvetica, sans-serif;
	color:#082733; width:574px; height:43px;
	background:url(images/horz-dot.gif) 0 100% repeat-x;
	background-color:inherit;
	}
div#ourCompany-bg div#ourCompany-part div#ourCompany-leftPart{
	width:284px; border-right:2px solid #CBC387;
	margin:12px 0 0 0; float:left;
	}
h2.faq-Hdr{
	width:231px; height:20px; color:#951509;
	line-height:19px; font-weight:bold; font-size:12px;
	padding:0 0 0 21px; background:#FAF3BB url(images/faq-icon.gif) 3px 4px no-repeat;
	}
h2.moreIdeas-Hdr{
	width:231px; height:20px; color:#951509;
	line-height:19px; font-weight:bold; font-size:12px;
	padding:0 0 0 21px; background:#FAF3BB url(images/more-ideac-icon.gif) 3px 4px no-repeat;
	}
ul.ourCompany-list{
	padding:11px 0 10px 0;
	}
ul.ourCompany-list li{
	background:url(images/bullet1.gif) 0 3px no-repeat;
	display:block; margin:0 0 8px 0; padding:0 0 0 15px;
	color:#47481A; font-size:11px; line-height:11px;
	background-color:inherit;
	}
ul.ourCompany-list li a{
	color:#47481A; font-size:11px; line-height:11px;
	text-decoration:underline;
	background-color:inherit;
	}
ul.ourCompany-list li a:hover{
	text-decoration:none;
	}
div#ourCompany-bg div#ourCompany-part div#ourCompany-rightPart{
	width:252px; margin:12px 0 0 0; float:left;
	padding:0 0 0 25px;
	}
h2.moreInfo-Hdr{
	width:231px; height:20px; color:#951509;
	line-height:19px; font-weight:bold; font-size:12px;
	padding:0 0 0 21px; background:#FAF3BB url(images/more-info-icon.gif) 3px 4px no-repeat;
	}
p.moreInfo-Text{
	padding:0 0 20px 23px; font-size:10px;
	line-height:14px; color:#47481A;
	background-color:inherit;
	}
h2.searchUrl-Hdr{
	width:231px; height:20px; color:#951509;
	line-height:19px; font-weight:bold; font-size:12px;
	padding:0 0 0 21px; background:#FAF3BB url(images/search-url-icon.gif) 3px 4px no-repeat;
	}

/*-------------------------- FUTURE PLANS --------------------------*/
div#futurePlan-bg{
	background:#2B0D0A url(images/future-plan-bg.gif) 0 0 repeat-x;
	color:#837C44;
	}
div#futurePlan-bg div#futurePlanContant{
	width:922px; margin:0 auto;
	padding:37px 0 54px 0;
	}

/*-------------------------- PROJECTS 2007 --------------------------*/
div#futurePlan-bg div#futurePlanContant div#projPart{
	width:251px; float:left;
	background-color:#706933;
	padding:2px 2px 28px 2px;
	color:#fff;
	}
div#futurePlan-bg div#futurePlanContant div#projPart h2.proj-hdr{
	height:37px; padding:13px 0 0 13px; color:#fff;
	font:normal 24px/25px "Arial Narrow", Arial, Helvetica, sans-serif;
	background-color:#1E1E1C; text-transform:uppercase;
	}
div#futurePlan-bg div#futurePlanContant div#projPart h2.proj-hdr span{
	font-weight:bold;
	}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic{
	padding:3px 0 0 0;
	}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li{
	display:block; margin:0 2px 0 0; float:left;
	}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li.noRightMargin{
	margin:0;
	}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li.noRightMargin a{
	display:block;
	}
div#futurePlan-bg div#futurePlanContant div#projPart h3.sub-hdr{
	color:#E7DFA0; font-size:12px; line-height:12px;
	font-weight:bold; text-indent:28px; margin:15px 0 0 0;
	background:url(images/bullet2.gif) 12px 0 no-repeat;
	background-color:inherit;
	}
div#futurePlan-bg div#futurePlanContant div#projPart p{
	padding:10px 23px 0 13px; color:#fff;
	font-size:11px; line-height:16px;
	background-color:inherit;
	}
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn{
	display:block; width:76px; height:28px; margin:5px 0 0 159px;
	background:url(images/read-more-btn.gif) 0 0 no-repeat;
	}
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn:hover{
	background:url(images/read-more-btn-selected.gif) 0 0 no-repeat;
	}

/*-------------------------- FUTURE PART --------------------------*/
div#futurePlan-bg div#futurePlanContant div#futurePart{
	width:613px; float:right; padding:10px 0 0 0;
	}
div#futurePlan-bg div#futurePlanContant div#futurePart h2.future-hdr{
	height:40px; color:#E7DFA0;
	font:normal 35px/35px "Arial Narrow", Arial, Helvetica, sans-serif;
	background:url(images/horz-dot-2.gif) 0 100% repeat-x;
	background-color:inherit;
	}
div#futurePlan-bg div#futurePlanContant div#futurePart h3.future-subHdr{
	color:#B46F07; font-size:17px; line-height:17px;
	padding:20px 0 0 0; font-weight:bold;
	background-color:inherit;
	}
div#futurePlan-bg div#futurePlanContant div#futurePart p{
	font-size:14px; line-height:24px;
	color:#837C44; padding:20px 0 0 0; width:440px;
	float:left; background-color:inherit;
	}
div#futurePlan-bg div#futurePlanContant div#futurePart img{
	float:right; display:block; margin:-50px 0 0 0;
	}

/*-------------------------- FOOTER PART --------------------------*/
div#footer-bg{
	background:#121212 url(images/footer-bg.gif) 0 0 repeat-x;
	color:#B3AC8B;
	}
div#footer-bg div#footer-menu{
	width:922px; margin:0 auto;
	padding:20px 0 29px 0;
	background:url(images/footer-logo.jpg) 100% 13px no-repeat;
	}
div#footer-bg div#footer-menu ul.footMenu{
	padding:0 0 0 0;
	}
div#footer-bg div#footer-menu ul.footMenu li{
	float:left; background:url(images/footmenu-divider.gif) 0 3px no-repeat;
	}
div#footer-bg div#footer-menu ul.footMenu li.noDivider{
	background:none;
	}
div#footer-bg div#footer-menu ul.footMenu li a{
	color:#B3AC8B; font-size:11px; line-height:16px;
	padding:0 7px 0 7px; display:block; margin:0 0 0 1px;
	background-color:inherit;
	}
div#footer-bg div#footer-menu ul.footMenu li a:hover{
	background-color:#262626;
	color:#B3AC8B;
	}
div#footer-bg div#footer-menu p.copyright{
	padding:5px 0 0 7px; color:#706933;
	font-size:11px; line-height:11px;
	background-color:inherit;
	}
div#footer-bg div#footer-menu p.copyright a{
	color:#B3AC8B;
	background-color:inherit;
	}
div#footer-bg div#footer-menu p.copyright a:hover{
	color:#706933;
	background-color:inherit;
	}

/*-------------------------- MISLENIOUS --------------------------*/
.noBottomPadding{
	padding-bottom:0 !important;
	}
.noBg{
	background:none !important;
	}
.topPad{
	padding-top:15px !important;
	}

Open in new window



I TRY TO ADD THE FULLSITE STYLE BUT DIDN'T WORKED .. THE ORIGINAL SITE IS IN THE ATTACHED FILE

site.zip
0
rockas1982
Asked:
rockas1982
  • 5
  • 4
1 Solution
 
SSupremeCommented:
Do you want "footer-bg" be at the bottom?
Because you can just apply background color to body and you are done.
0
 
BlueYonderCommented:
just use the tag "width: 100%"
0
 
SSupremeCommented:
Logically thinking, he is talking about height not width.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rockas1982Author Commented:
supreme can you show me an example

I want the center page to be <div id="futurePlanContant"> to be to 100% heigh so the footer will be always in the bottom of the page except if the futurePlanContant is very big so it will go downer
0
 
SSupremeCommented:
Example will be bogach.by
0
 
rockas1982Author Commented:
(bogach) what does that mean ?

can you show me on my code ?
0
 
SSupremeCommented:
bogach is rich but it was a link.
try it: Unnamed-Site-2.zip
0
 
rockas1982Author Commented:
http://www.photo-calliope.com/

WHAT AM I DOING WRONG  ?
0
 
SSupremeCommented:
futurePlan-bg should have padding
and footer-bg should have negative Margin-top equal to its width, in this case margin-top:-65px;
0
 
rockas1982Author Commented:
YOU ARE THE BEST

I did it but i still don't know how i did it
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now