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:

<!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">

</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> </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> </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. <!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> </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> </p>
</div>
</div>
</div>
<div id="bottombg">
"bottombg"
<div id="footer">"footer"</div>
</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! :D

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!