New to divs - what is the right way to do things?

[GlennKilpatrick]

Is it ok to put the separate divs for header, footer and nav bar all inside the main body div or should they be seprated . Ie open header then close it, open navdiv then close it, open mainboddy div then close it and finally open footer and then close it - or should I not use divs at all for all these seprate areas?.

Once ive figured which is the correct way to do things I have some questions about whitespace - sorry to be a pain guys - Its not as simple as it should be.

Thanks in advance Glenn

<div id="main">

<div id="header">
<p style="text-align: right" class="whitetext1">Next Steps</p>

<img border="0" src="next-steps-header2.jpg" width="720" height="128"></img>
</div>

<div id="navcontainer">
<ul id="navlist">
<li><a href="/index.php">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Our Garden</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Credits</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="footer">
<p class="pcenter"> Website By GK</p>
</div>

</div>

[edited by: GlennKilpatrick at 5:20 pm (utc) on Dec. 15, 2006]

[edited by: SuzyUK at 9:19 pm (utc) on Dec. 15, 2006]
[edit reason] examplified URLs (see TOS#13) [/edit]

[GlennKilpatrick]

Also why am I getting whitespace around the navcontainer div and around the footer div?

[url's removed per TOS #13]

the css is

#navlist li {
font-family: verdana, arial, sans-serif; font-size:12px; background-color: #34BF93;
display: inline;
list-style-type: none;
padding-right: 20px;
margin-bottom: 0
}

#navcontainer {
margin: 0 auto; /* align for good browsers */
text-align: center; /* counter the body center */
background-color: #34BF93;
}

#footer { background-color: #1F7258}

body {
font: 80% verdana, arial, helvetica, sans-serif; background-color: #8C8C8C;
text-align: center; /* for IE */
}

#main {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
background-color: white;
border: 2px solid #000;
width: 720px;
}

.header {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
background-color: #1F7258;
font-family:Georgia;
font-size:18pt;
color:white;
text-align:right;
padding-right:10px
}

code {
font-size: 115%;
}

h1{
font-family:gergia;
font-size:18pt;
text-align:center;
text-decoration:bold;
color:#000080
}

h2{
margin: 0.3em 0.3em 0.5em 0.3em;
font-family:gergia;
font-size:12pt;
text-align:left;
text-decoration:bold;
color:#000080
}

p{
margin: 0.3em 0.3em 0.5em 0.3em;
font-family:verdana;
font-size:10pt;
color:black;
text-align:left
}

.pcenter {
font-family:verdana;
font-size:10pt;
color:white;
text-align:center}

.whitetext1 {
font-family:Georgia;
font-size:18pt;
color:white;
text-align:center
}

.whitetext2 {
font-family:verdana;
font-size:10pt;
color:white;
text-align:center
}

a {
color White;
text-decoration:
none;
text-align: left
}

a:link {
color: White;
text-decoration: none;
text-align: left
} /* unvisited link */

a:visited {
color: 000080;
text-decoration: none;
text-align: left
} /* visited link */

a:hover {
color: red;
text-align: left
} /* mouse over link */

a:active {
color: green;
text-align: left
} /* selected link */

#navlist li {
font-family: verdana, arial, sans-serif;
font-size:12px;
background-color: #34BF93;
display: inline;
list-style-type: none;
padding-right: 20px;
margin-bottom: 0
}

#navcontainer {
margin: 0 auto; /* align for good browsers */
text-align: center; /* counter the body center */
background-color: #34BF93;
}

#footer{ background-color: #1F7258}

body {
font: 80% verdana, arial, helvetica, sans-serif; background-color: #8C8C8C;
text-align: center; /* for IE */
}

#main {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
background-color: white;
border: 2px solid #000;
width: 720px;
}

.header {
margin: 0 auto; /* align for good browsers */
text-align: left; /* counter the body center */
background-color: #1F7258;font-family:Georgia;font-size:18pt;color:white;text-align:right; padding-right:10px
}

code {
font-size: 115%;
}

h1{font-family:gergia;font-size:18pt;text-align:center;text-decoration:bold;color:#000080}

h2{margin: 0.3em 0.3em 0.5em 0.3em; font-family:gergia;font-size:12pt;text-align:left;text-decoration:bold;color:#000080}

p{margin: 0.3em 0.3em 0.5em 0.3em; font-family:verdana;font-size:10pt;color:black;text-align:left}

.pcenter {font-family:verdana;font-size:10pt;color:white;text-align:center}

.whitetext1{font-family:Georgia;font-size:18pt;color:white;text-align:center}

.whitetext2{font-family:verdana;font-size:10pt;color:white;text-align:center}

a{color White;text-decoration:none;text-align: left}

a:link {color: White;text-decoration: none;text-align: left} /* unvisited link */

a:visited {color: 000080;text-decoration: none;text-align: left} /* visited link */

a:hover {color: red;text-align: left} /* mouse over link */

a:active {color: green;text-align: left} /* selected link */

[edited by: SuzyUK at 12:17 am (utc) on Dec. 16, 2006]

[SuzyUK]

being as how there's way too much code (which you might want to check on the validator [jigsaw.w3.org]) there to try to be specific I'll answer the first question.

Is it ok to put the separate divs for header, footer and nav bar all inside the main body div or should they be seprated

Yes it's OK.. that's what divs (SHORT FOR DIVISIONS) are for you should open and close a division as is necessary. It's often not necessary to open a new div for a header if you've used the correct mark up in the first place (i.e. an h1, h2 element) but if it's easier to think in terms of divs then go for it

remember that the HTML and <body> elements are themselves styleable elements and if you want to make further divisions that is up to you and is not something that everyone is likely to achieve in the same way

Suzy

[edited by: SuzyUK at 12:19 am (utc) on Dec. 16, 2006]