Content overlapping footer problem.

Kyra · 05-19-2009, 11:10 AM

I'm about to tear the hairs off my head! i can't seem to fix the problem of my content overlapping the footer. I've looked and browsed through most of the forum topics and tried out the solutions but it doesn't seem to work for me! this is my first attempt at div coding and i'd really appreciate it if someone could help me out! I'd like the leftmenu and content to NOT overlap the footer when the text overflows.

This is my coding:

Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	background-image: url(bg.png);
	background-repeat: repeat-x;
	margin-top: 0px;
	
}

#topbg {
	width:1000px;
	height:500px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	background-image: url(bgtop.png);
	background-repeat: no-repeat;
	
}

#mainframe {
	width:876px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	
}

#header {
	width:876px;
	height:105px;
	margin-top: 0px;

}

#mainmenu {
	width:876px;
	height:32px;
	margin-top: 0px;
	padding-top: 7px;

}

#topdivider {
	width:876px;
	height:33px;
	margin-top: 0px;
	padding: 3px 0;
}

#leftmenu {
	width:213px;
	float:left;
	margin-bottom: 335px; /* height of footer */	
	z-index:99;
	position:absolute;

}

#content {
	width:663px;
	float:right;
	margin-left: 213px;
	margin-bottom: 335px; /* height of footer */ 	
	z-index:99;
	position:absolute;
	overflow:auto;

}

#footer {
	width:876px;
	height:108px;	
	margin-left: auto;
	margin-right: auto;

}

#bottombg {
	width:1000px;
	height:335px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-bottom: 0;
	background-image: url(bgbottom.png);
	background-repeat: no-repeat;
}
-->
</style>
</head>

<body>
<div id="topbg">
<div id="mainframe">
<div id="header">"header"</div>
<div id="mainmenu">"mainmenu"</div>
<div id="topdivider">"topdivider"</div>
<div id="leftmenu">
  <p>&nbsp;</p>
  <p>leftmenu</p>
  <p>b</p>
  <p>c</p>
  <p>d</p>
</div>
<div id="content">
  <p>"content"</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>&nbsp;</p>
</div>
"mainframe"</div>
"topbg"</div>
<div id="bottombg">
<div id="footer">"footer"</div>
"bottombg"</div>


</body>
</html>

Am i coding it wrongly? Please help!

abduraooft · 05-19-2009, 11:42 AM

Have a look at http://bonrouge.com/2c-hf-fluid.php or http://bonrouge.com/2c-hf-fixed.php

Kyra · 06-05-2009, 10:26 AM

Thanks for the advice. I've been trying to assimilate the solution with my template but it doesn't seem to work for me nor solve my prob!

But i really appreciate your advice. Sorry it took me so long to reply.

Excavator · 06-05-2009, 03:09 PM

Hello Kyra,
Have a look at this - I put in background colors to show the different divs.

Code:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #FC6 url(bg.png) repeat-x;
}
* {
	margin: 0;
	padding: 0;
	border: none;
}
#topbg {
	width:1000px;
	margin: 0 auto;
	background: #F00 url(bgtop.png) no-repeat;
}
#mainframe {
	width:876px;
	margin: 0 auto;
	background: #00F;
}
#header {
	width:876px;
	height:105px;
}
#mainmenu {
	width:876px;
	height:32px;
	padding-top: 7px;
}
#topdivider {
	width:876px;
	height:33px;
	padding: 3px 0;
}
#leftmenu {
	width:213px;
	float:left;
	background: #3FF;
}
#content {
	width:663px;
	margin-left: 213px;
	background: #9F0;
}
#bottombg {
	width:1000px;
	height:335px;
	margin: 0 auto;
	background: #366 url(bgbottom.png) no-repeat;
}
#footer {
	width:876px;
	height:108px;
	margin: 0 auto;
	background: #0CC;
}
</style>
</head>
<body>
	<div id="topbg">
	"topbg"
		<div id="mainframe">
		"mainframe"
			<div id="header">"header"</div>
			<div id="mainmenu">"mainmenu"</div>
			<div id="topdivider">"topdivider"</div>
				<div id="leftmenu">
					<p>&nbsp;</p>
					<p>leftmenu</p>
					<p>b</p>
					<p>c</p>
					<p>d</p>
				<!--end leftmenu--></div>
			<div id="content">
				<p>"content"</p>
				<p>1</p>
				<p>2</p>
				<p>3</p>
				<p>4</p>
				<p>&nbsp;</p>
			<!--end content--></div>
		<!--end mainframe--></div>
	<!--end topbg--></div>
		<div id="bottombg">
			"bottombg"
			<div id="footer">"footer"</div>
		<!--end bottombg--></div>
</body>
</html>

Kyra · 06-09-2009, 05:10 AM

Thanks,Excavator for taking the effort to build a sample div template for me! I really appreciate it! You totally solved my problem and i'm able to manipulate the codes to suit my template design based on your sample! All that possibilities!

And to all who took the time to read my SOS msg and devise a way to help me: I truly appreciate it and am grateful for your help! Thanks again!