div positioning (template for website)

bgner1 · 04-18-2012, 02:56 PM

i am having trouble setting out a basic template for my website when concerning divs.

the header is fine, however i am having trouble creating a footer div as it does not go underthe previous div (mainbody div). the code is inseted below.....any sugesstions???

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=utf-8" />
<title>DMP Devices - Home</title>
<link rel="shortcut icon" href="favicon1.ico">
<link rel="stylesheet" type="text/css" href="css 2.css" />
</head>

<body style="margin:0px;"

<div id="wholeweb">

<div id="hcontainer">

<center><h1>Digital Media Playback Devices (DMPD)</h1></center>

<div id="pnum">
<p>Call Us: 02383 384345</p>
</div>

<ul id="mainNav">
<li><a href="index.html"> Index </a></li>
<li><a href="About.html"> About </a></li>
<li><a href="Overview.html"> Overview </a></li>
<li><a href="Latest.html"> Latest </a></li>
<li><a href="Contact.html"> Contact </a></li>
</ul>

<div class="clear"> </div>

</div>
<br />

<div id="Mainbody">
<h2>Home Page</h2>
</div>

</div>
<div id="footerdiv">
thtrht
</div>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */

#hcontainer
{
background-image: url(bckimage.png);
background-repeat:repeat-x;
padding:0px;
margin:0px;
position:fixed;
width:70%;
left:200px;
clear:both;
float:left;
z-index:5;
}
#wholeweb
{
position:relative;
padding:0px;
margin:0px;
}
#Mainbody
{
background-color:#CCC;
position:relative;
float:left;
top:80px;
left:200px;
clear:both;
width:70%;
left:200px;

float:left;
height:100px;
}
#pnum
{
position:absolute;
right:10px;
top:0px;
padding:0px;
margin:0px;
height:50px;
width:165px;
height: 8px;
clear:both;
}
#mainNav {
margin: 0px;
text-decoration:none;
text-align:center;
font-size:15px;
float:left;
position:relative;
left:50%;
clear:both;
}
#mainNav li
{
border-width:0px;
float: left;
height: 100%;
padding: 0px;
list-style-type: none;
position:relative;
right:50%;

}
.clear
{
clear: both;font-size:0;line-height:0;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
text-decoration:none;
text-color:white;
}
li
{
float:left;
}
a
{
display:block;
width:100px;
text-decoration:none;
background-color:grey;
color:#FFFFFF;
}

#footerdiv
{
background-color:#CCC;
position:relative;
float:left;
height:300px;
left:200px;
clear:both;
width:70%;

}

achira · 04-18-2012, 03:12 PM

you need a clear.

<div class="clr"></div>

put that after your center content div and before your footer div.

bgner1 · 04-18-2012, 03:15 PM

the divs still underlap/overlap one another :S

achira · 04-18-2012, 03:20 PM

Did you define the clr class in your css?

Code:

.clr {
 width: 100%;
 clear: both;
}

I use this between ALL div areas that I want to stack horizontally. I don't want to leave anything to chance.

success4acb · 04-18-2012, 03:33 PM

You have quite a few coding errors.
It may help you if you were to put your code through validation at: http://validator.w3.org/

Here is what I found that needs corrected:

need to close:
<link rel="shortcut icon" href="favicon1.ico" />
<body style="margin:0px;">

and I would move the close div </div> right before your opening "footerdiv" to just before the closing body tag </body> thereby having the "wholeweb" div surround everything.

Hope that helps.

bgner1 · 04-18-2012, 03:35 PM

yh its defined :S would it be possible for you to run the code in a text editor yourself and save it, open it to view the problem?