I have banged my head around on this for a day now and cannot figure out what I've done wrong.

Site looks okay in Safari and Firefox on a Mac, but when viewing on IE 6 or IE 7, it is a jumbled mess. Currently the side menu drops below the main content.

When I first designed the site I had the left side menu floating left, but I had the opposite problem - the flash and main text dropped down below it. I then took off the float from the side menu, added a wide right padding (someone told me about IE doubling margins or something), and made the main content to float right. Now I have what you see below.

Could someone please take a look at:

http://www.harvestchapelclt.org/

and tell me what stupid things I have done wrong?

Currently the side menu drops below the main content.

Classic float drop. Make sure that the total width of your divs, including margin and padding is less than the width of your containing element.

If you have the left side menu floated left and you've also added left margin, IE pulls off it's infamous doubled-float margin bug.

You also may have a problem with the use of 'id="head"' because you're adding that no only to the div, but to the images. ID's MUST be unique, you cannot re-use them. If you want to re-use the rules, make "head" a class instead.

In FF on Windows, your #main content section is sitting way down below , and htis is because of the 595px left padding you have on the left side bar.

Float #main left, or don't float it at all and use a wide left margin on #main to push it past the left side bar.

You also have some funky syntax in your CSS. The proper border size rule is border-width, not border-size that you have. There is also no text-shadow rule, at least not that is supported in CSS 2.1.

I've got most of the problem worked out, but the Flash is making a mess in IE 6. I would highly suggest NOT using Dreamweaver's default 'active content' scripting, it doesn't work well at all. Something like swfObject is much easier and does NOT use that horrid <embed> tag.

Ok, this is the CSS that fixes your float drop problems:

html {
background: #81693f /*--url(../images/background2.jpg) repeat 0 0--*/;
margin: 0;
padding: 0;
}

body {
color: #333333;
font: .9em Arial, Helvetica, sans-serif;
margin: auto;
padding: 0;
}

#top {
background-color: #620801;
color: #fff;
padding: 0;
height: 37px;
}
h1, h2, h3, h4 {
color: #a36c25;
font-weight: bold;
}

#wrapper {
width: 800px;
background-image: url(brnbkgnd.gif);
margin: 0 auto;
padding: 0;
}
#wrapper img {
border:none;
}
#head {
margin:0px 0 0 0;
padding:0;
}
#topbar {
background-color:#620801;
height:25px;
padding:0;
}

#contentwrapper {
background-image: url(brnbkgnd.gif);
margin:0;
padding:0;
/* border: 1px solid blue;*/
}

#leftsidebar {
float: left;
width: 200px;
margin: 5px 0;
padding:15px 0px 5px 0px;
/*border: 1px solid red;*/
}

#main {
/*float:right;*/
width:575px;
padding:0;
margin:0 0 0 210px;
border: 1px dotted green;

}

#maintext {
width:565px;
background-color:#FFFFFF;
margin:5px;
/*padding: 10px;*/
line-height:1.5em;

}
#maintext p{
padding: 10px;
}

#servicetimes {
/*float:left;*/
/*clear:left;*/
width: 190px;
background-image:url(blubkgnd.gif);
background-repeat:repeat-x;
color:#fff;
font-weight:bold;
margin: 5px;
padding: 0;
text-align:center;

}
#servicetimes a:link, a:visited {
color:#fff;
text-decoration:none;
}
#servicetimes a:hover {
color:#fff;
text-decoration:underline;
}

#footer {
background-color:#620801;
height:15px;
color:#FFFFFF;
clear:both;
margin:0 0 15px 0;
padding: 5px;
text-align:center;
}

#footer ul {
margin:0;
padding:0;
}

#footer li {
display: inline;
padding-right: 25px;
}

/*- Menu 2--------------------------- */

#menu2 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-width: 1px;
border-width: 1px;
}

#menu2 li a {
height: 15px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(menu2.gif);
padding: 8px 0 0 30px;
}

#menu2 li a:hover {
color: #3688BA;
background: url(menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}

#nav {
margin:0;
padding:0;
background:#620801 url(nav_bg.jpg) 0 0 repeat-x;
float:left;
width:100%;
border:1px solid #684712;
border-width:1px 0;
}

#nav li {
display:inline;
padding:0;
margin:0;
}

#nav a:link,
#nav a:visited {
color:#fff;
background:#620801;
padding:4px 40px 4px 10px;
float:left;
width;
border-right:1px solid #684712;
text-decoration:none;
font:bold .80em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}

#nav a:hover {
color:#fff;
background-image:url(navbtnbkgnd.gif);
}

#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}

#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}

#nav a:active {
background:#e35a00;
color:#fff;
}

#nav li:first-child a {
border-left:1px solid #684712;
}

/*-----side nav--*/

#sidenav {
/*float:left;*/
margin: 0;
padding: 0;
background: #684712 url(navbtnbkgnd.gif) 0 0 repeat-y;
/*width: 200px;*/
border:1px solid #684712;
border-width:1px 0;
/*border: 1px solid orange;*/
}

#sidenav li {
display: block;
list-style:none;
margin:0;
padding:10px;
}

#sidenav a:link, a:visited {
color: #fff;
padding: 0px;
width: auto;
text-decoration: none;
font: bold .80em/1em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}

#sidenav a:hover {
color:#fff;
text-decoration:underline;
}
/*--end side nav--*/

#durham {
margin: 0 5px 5px 0;
}
#spacer {
clear:both;
}

h4 .messages {
display:inline;
}
#recommended a:link, a:visited {
color: #333333;
text-decoration: none;
}
#recommended a:hover {
text-decoration:underline;
}
.knowGod {
text-align:center;
margin: 0 auto;
}
h4, .knowGodHd {
color:#FFFFFF;
text-align:center;
}

#flash {
width:575px;
height: 184px;
/*padding:5px;*/
margin:0 auto;
/*text-align:center;*/
border: 1px solid yellow;
}

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Put the clearing break in your HTML after the end of #main.