Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

height of containing div

Status
Not open for further replies.
PushCode

PushCode

Programmer
Dec 17, 2003
573
US
I'm developing a new layout, and the height of the page isn't automatically stretching to contain all of the content within it. Basically everything looks fine except that the content is stretching down into the footer div. Also, in Firefox, the layout istn't centered in the page like it is in IE.

Can anyone help me with this?

Here's a link to see what it looks like:

Here's the entire page code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>

<title>test</title>

<style>
body {
	position:absolute;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #333333;
	padding: 0px;
	margin:0px;
	background:#3A95C2 url(assets/img/lyt_body_bg.gif) top center no-repeat fixed;
	height:100%;
}
h1 {
	font-size:23px;
	color:#ff9900;
}
.menu a{
	text-decoration:none;
	font-family:"Trebuchet MS";
	font-size:13px;
	color:#2A84B1;
	font-weight:bold;
	background: url(assets/img/lyt_arrow_off.gif) no-repeat left center;
	padding-left:5px;
	margin-right:5em;
}
.menu a:visited{
	color:#2A84B1;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu a:hover{
	color:#3399CC;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu a:active{
	color:#003366;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu ul  {
	list-style-type: none;
	width:600px;
}

.menu ul li {
	display:inline;
}

body#home a#homenav,
body#services a#webnav,
body#rentals a#contactnav,
body#products a#prodnav {
	color: #003366;
}

div#wrapper {
	background-image: url(assets/img/lyt_bg.gif);
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	text-align: left;
	width:750px;
	height:100%;
}
.hdr {
	background-image: url(assets/img/lyt_hdr.gif);
	background-repeat:no-repeat;
	height:137px;
	width:750px;
	overflow:auto;
}
.hdr_lft {
	float:left;
	width:400px;
	padding:18px 0 0 21px;
}
.hdr_rgt {
	float:right;
	text-align:right;
	width:300px;
	padding:20px 25px 10px 0;
}
.content {
	position:absolute;
	padding:10px 20px 10px 20px;
	height:100%;
}
.cont_text {
	padding-left:0.3em;
	padding-right:0.3em;
	padding-bottom:10px;
	border-bottom:1px dashed #0099CC;
}
.cont_lft {
	float:left;
    width:490px;
}
.cont_rgt {
	float:right;
    width:200px;
}
.cr {
	margin-bottom:0.5em;
	background-color:#C4D5DE;
	width:190px;
	border:1px solid #3A95C2;
}
.cr_title{
	background-color:#3A95C2;
	font-family:"Trebuchet MS";
	color:white; 
	padding:0px 1em 0px 1em;
}

.cr_cont{
	padding:0.5em;
	font-size:11px;
}
.ftr {
	background-image: url(assets/img/lyt_footer.gif);
	background-repeat:no-repeat;
	margin-left: auto;
	margin-right: auto;
	height:50px;
	width:750px;
	text-align:center;
	font-size:10px;
	color:#666666;
}
.date{
	padding: 2px;
	font-family:"Trebuchet MS";
	font-size:12px;
	margin-bottom:1em;
	color:#006699;
}
</style>
</head>
<body id="home" onload="">
<cfset page.name = "home">
<div id="wrapper">
  <div class="hdr">
    <div class="hdr_lft">LOGO HERE</div>
<div class="hdr_rgt">
	LOGIN HERE
</div>
  </div>
  <div class="menu">
	<ul>	
		<li><a href="index.cfm" title="Secure Image Hosting" id="homenav">HOME</a></li>
		<li><a href="[URL unfurl="true"]http://www.pushcode.com"[/URL] title="Web Design" id="webnav">WEB DESIGN</a></li>
		<li><a href="contact.cfm" title="Contact Us" id="contactnav">CONTACT US</a></li>
	</ul>
  </div>
  <div class="content">
    <div class="cont_lft">
		<h1>Content Title One</h1>
		<div class="cont_text">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer accumsan tempor orci. Praesent suscipit viverra massa. Aliquam viverra. Nunc metus risus, venenatis ac, feugiat nec, congue cursus, lectus. Cras tincidunt, neque vitae malesuada dictum, massa leo malesuada ante, sit amet tristique tellus massa euismod tortor. Ut blandit tristique metus. Maecenas sagittis, est id congue congue, neque tellus commodo nunc, sit amet rutrum pede mauris pellentesque libero. Morbi in tortor id magna fermentum rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed turpis sapien, suscipit at, egestas sit amet, placerat ac, massa. Cras auctor dui at lorem. Praesent purus ipsum, auctor ut, condimentum sit amet, egestas at, tortor. Sed nulla ante, mollis vitae, faucibus luctus, rhoncus nec, magna. Fusce sem. In cursus justo id justo.</p>
		
		<p>Duis accumsan velit id mi. Integer a augue. Duis vitae orci vitae turpis venenatis venenatis. Sed tincidunt, metus auctor rutrum varius, metus lorem consectetuer orci, sit amet cursus leo lectus et tellus. Vestibulum sed est. Vivamus purus. Maecenas laoreet. Praesent eleifend tortor et magna. Fusce varius. Vestibulum eros lectus, ultrices sit amet, semper non, cursus id, est.</p> 
		</div>
		<h1>Content Title Two</h1>
		<div class="cont_text">
		<p>Nulla interdum placerat erat. Curabitur est. Curabitur interdum nibh. Curabitur eget dui. Etiam eget leo a libero aliquam eleifend. Praesent tellus ipsum, lacinia eget, facilisis vel, sollicitudin eu, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque blandit ultrices leo. Integer convallis. Mauris eu sapien.</p> 

<p>Nulla urna. Integer ullamcorper elit et lorem. Proin rutrum. Sed facilisis nibh sit amet nisl. Pellentesque elit felis, pulvinar sit amet, aliquet eu, dapibus ac, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ipsum metus, mollis vel, sodales ac, suscipit ac, velit. Pellentesque condimentum nulla quis neque. Vivamus at velit quis diam adipiscing sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dui ligula, ultricies ut, congue aliquet, tempor ut, massa. Sed euismod. Proin nisl libero, nonummy ultricies, imperdiet ut, vulputate quis, nunc. Nulla malesuada dapibus mi. Nulla adipiscing. Vivamus ac augue. Sed id purus nec lectus placerat pellentesque. Vestibulum facilisis risus non massa.</p>
		</div>
    </div>
	<div class="cont_rgt">
		<div class="cr">
			<div class="cr_title"><strong>SIGN UP NOW!</strong></div>
  			<div class="cr_cont">Number of images to host:<br />
				SIGNUP FORM HERE
			</div>
		</div>
		<div class="date">
			<SCRIPT LANGUAGE="Javascript">
			// Array of month Names
			var monthNames = new Array(
			"January","February","March","April","May","June","July",
			"August","September","October","November","December");
			
			var now = new Date();
			document.write(monthNames[now.getMonth()] + " " + 
			now.getDate() + ", " + now.getFullYear());
			</SCRIPT>
		</div>
		<div class="cr">
		  <div class="cr_title"><strong>Frequently Asked Questions </strong></div>
  		  <div class="cr_cont">
  			<p>FAQ TEXT GOES HERE    </p>
  			</div>
		</div>
	</div>
  </div>
</div>
<div class="ftr">
	FOOTER TEXT GOES HERE
</div>
</body>
</html>

Thanks!
 
Sort by date Sort by votes
Your content is absolutely positioned, taking it out of the flow, and allowing your footer to move up to its position. This may help you get started:
Code: 
.content {
    position:[b]relative[/b];
    padding:10px 20px 10px 20px;
    height:100%;
}

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Thanks, that seems to have helped in IE, but the content is still overlapping the footer in Firefox, and the page still isn't centered in Firefox.

Anyone with suggestions?
 
Upvote 0 Downvote
Add [tt]height: 100%;[/tt] to your html (html is the canvas and if you want 100% high page you need to start there) and remove the positioning from the body. That should make it work.
 
Upvote 0 Downvote
Thanks Vragabond, but it still isn't quite right. The text is still overlapping the footer in FF, and the footer text isn't properly centered in FF. In IE, it looks perfect.

Any ideas out there?
Here's the link to the current live code:

Here's the current code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>

<title>test</title>

<style>
html {
	height:100%;
}
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #333333;
	padding: 0px;
	margin:0px;
	background:#3A95C2 url(assets/img/lyt_body_bg.gif) top center no-repeat fixed;
	height:100%;
}
h1 {
	font-size:23px;
	color:#ff9900;
	padding-top:0px;
}
.menu a{
	text-decoration:none;
	font-family:"Trebuchet MS";
	font-size:13px;
	color:#2A84B1;
	font-weight:bold;
	background: url(assets/img/lyt_arrow_off.gif) no-repeat left center;
	padding-left:5px;
	margin-right:5em;
}
.menu a:visited{
	color:#2A84B1;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu a:hover{
	color:#3399CC;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu a:active{
	color:#003366;
	text-decoration:none;
	background: url(assets/img/lyt_arrow_on.gif) no-repeat left center;
}
.menu ul  {
	list-style-type: none;
	width:600px;
}

.menu ul li {
	display:inline;
}

body#home a#homenav,
body#services a#webnav,
body#rentals a#contactnav,
body#products a#prodnav {
	color: #003366;
}

div#wrapper {
	background-image: url(assets/img/lyt_bg.gif);
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	width:750px;
	height:100%;
}
.hdr {
	background-image: url(assets/img/lyt_hdr.gif);
	background-repeat:no-repeat;
	height:137px;
	width:750px;
}
.hdr_lft {
	float:left;
	width:400px;
	padding:18px 0 0 21px;
}
.hdr_rgt {
	float:right;
	text-align:right;
	width:300px;
	padding:20px 25px 10px 0;
}
.content {
	position:relative;
	padding:0px 20px 10px 20px;
}
.cont_text {
	padding-left:0.3em;
	padding-right:0.3em;
	padding-bottom:10px;
	border-bottom:1px dashed #0099CC;
	margin-bottom:20px;
}
.cont_lft {
	float:left;
    width:490px;
}
.cont_rgt {
	float:right;
    width:200px;
}
.cr {
	margin-bottom:0.5em;
	background-color:#C4D5DE;
	width:190px;
	border:1px solid #3A95C2;
}
.cr_title{
	background-color:#3A95C2;
	font-family:"Trebuchet MS";
	color:white; 
	padding:0px 1em 0px 1em;
}

.cr_cont{
	padding:0.5em;
	font-size:11px;
}
.ftr {
	background-image: url(assets/img/lyt_footer.gif);
	background-repeat:no-repeat;
	margin-left: auto;
	margin-right: auto;
	height:50px;
	width:750px;
	text-align:center;
	font-size:10px;
	color:#666666;
}
.date{
	padding: 2px;
	font-family:"Trebuchet MS";
	font-size:12px;
	margin-bottom:1em;
	color:#006699;
}
</style>
</head>
<body id="home" onload="">
<cfset page.name = "home">
<div id="wrapper">
  <div class="hdr">
    <div class="hdr_lft">LOGO HERE</div>
	<div class="hdr_rgt">
		LOGIN HERE
	</div>
  </div>
  <div class="menu">
	<ul>	
		<li><a href="index.cfm" title="Secure Image Hosting" id="homenav">HOME</a></li>
		<li><a href="[URL unfurl="true"]http://www.pushcode.com"[/URL] title="Web Design" id="webnav">WEB DESIGN</a></li>
		<li><a href="contact.cfm" title="Contact Us" id="contactnav">CONTACT US</a></li>
	</ul>
  </div>
  <div class="content">
    <div class="cont_lft">
		<h1>Content Title One</h1>
		<div class="cont_text">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer accumsan tempor orci. Praesent suscipit viverra massa. Aliquam viverra. Nunc metus risus, venenatis ac, feugiat nec, congue cursus, lectus. Cras tincidunt, neque vitae malesuada dictum, massa leo malesuada ante, sit amet tristique tellus massa euismod tortor. Ut blandit tristique metus. Maecenas sagittis, est id congue congue, neque tellus commodo nunc, sit amet rutrum pede mauris pellentesque libero. Morbi in tortor id magna fermentum rhoncus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed turpis sapien, suscipit at, egestas sit amet, placerat ac, massa. Cras auctor dui at lorem. Praesent purus ipsum, auctor ut, condimentum sit amet, egestas at, tortor. Sed nulla ante, mollis vitae, faucibus luctus, rhoncus nec, magna. Fusce sem. In cursus justo id justo.</p>
		
		<p>Duis accumsan velit id mi. Integer a augue. Duis vitae orci vitae turpis venenatis venenatis. Sed tincidunt, metus auctor rutrum varius, metus lorem consectetuer orci, sit amet cursus leo lectus et tellus. Vestibulum sed est. Vivamus purus. Maecenas laoreet. Praesent eleifend tortor et magna. Fusce varius. Vestibulum eros lectus, ultrices sit amet, semper non, cursus id, est.</p> 
		</div>
		<h1>Content Title Two</h1>
		<div class="cont_text">
		<p>Nulla interdum placerat erat. Curabitur est. Curabitur interdum nibh. Curabitur eget dui. Etiam eget leo a libero aliquam eleifend. Praesent tellus ipsum, lacinia eget, facilisis vel, sollicitudin eu, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque blandit ultrices leo. Integer convallis. Mauris eu sapien.</p> 

<p>Nulla urna. Integer ullamcorper elit et lorem. Proin rutrum. Sed facilisis nibh sit amet nisl. Pellentesque elit felis, pulvinar sit amet, aliquet eu, dapibus ac, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ipsum metus, mollis vel, sodales ac, suscipit ac, velit. Pellentesque condimentum nulla quis neque. Vivamus at velit quis diam adipiscing sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dui ligula, ultricies ut, congue aliquet, tempor ut, massa. Sed euismod. Proin nisl libero, nonummy ultricies, imperdiet ut, vulputate quis, nunc. Nulla malesuada dapibus mi. Nulla adipiscing. Vivamus ac augue. Sed id purus nec lectus placerat pellentesque. Vestibulum facilisis risus non massa.</p>

<p>Nulla urna. Integer ullamcorper elit et lorem. Proin rutrum. Sed facilisis nibh sit amet nisl. Pellentesque elit felis, pulvinar sit amet, aliquet eu, dapibus ac, tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ipsum metus, mollis vel, sodales ac, suscipit ac, velit. Pellentesque condimentum nulla quis neque. Vivamus at velit quis diam adipiscing sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dui ligula, ultricies ut, congue aliquet, tempor ut, massa. Sed euismod. Proin nisl libero, nonummy ultricies, imperdiet ut, vulputate quis, nunc. Nulla malesuada dapibus mi. Nulla adipiscing. Vivamus ac augue. Sed id purus nec lectus placerat pellentesque. Vestibulum facilisis risus non massa.</p>
		</div>
    </div>
	<div class="cont_rgt">
		<div class="cr">
			<div class="cr_title"><strong>SIGN UP NOW!</strong></div>
  			<div class="cr_cont">SIGNUP FORM HERE			</div>
		</div>
		<div class="date">
			<SCRIPT LANGUAGE="Javascript">
			// Array of month Names
			var monthNames = new Array(
			"January","February","March","April","May","June","July",
			"August","September","October","November","December");
			
			var now = new Date();
			document.write(monthNames[now.getMonth()] + " " + 
			now.getDate() + ", " + now.getFullYear());
			</SCRIPT>
		</div>
		<div class="cr">
		  <div class="cr_title"><strong>Frequently Asked Questions </strong></div>
  		  <div class="cr_cont">
  			<p>FAQ TEXT GOES HERE    </p>
  			</div>
		</div>
	</div>
  </div>
</div>
<div class="ftr">FOOTER TEXT GOES HERE</div>
</body>
</html>

Thanks for any help!
 
Upvote 0 Downvote
It is actually correct. You state that you want your html, body and wrapper to be 100% high. 100% of what? Of the viewport or the current size of the browser window. Furthermore footer is positioned right underneath that, so right under the 100%.

So, in IE the height is wrongly understood and is applied as a min-height -- meaning that it expands if there is more contant than the screen is high. FF however respects the given height and just renders the additional content outside the box -- as it should be. One can solve these problems by applying height only to IE and applying min-height to all the other browsers.
 
Upvote 0 Downvote
Okay, it seems to be working now, but only if I use the overflow:hidden; property. I have the following as my wrapper css:

Code: 
div#wrapper {
	background-image: url(assets/img/lyt_bg.gif);
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	width:750px;
	<!--[if IE]>
  	height:100%;
	<![endif]-->
	min-height:100%;
	overflow:hidden
}

Is this correct? I want to make sure this is the correct way of doing this, even though it is working.

Thanks!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
781
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
623
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
131
CoolBreeze007
CoolBreeze007
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
122
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top