Sorry, I didn't look real hard at your stylesheet.

Okay, you are clearing floats, but you shouldn't be floating them to begin with. The only blocks you need to float are the #content and #sidemenu.

The best thing to do in this case is to add an additional wrapper to contain these elements. Call it something generic, such as #contentwrapper.

In your CSS, add the following declaration:

.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */

Then add class="clear" to your #contentwrapper div. This clears the float.

Structurally, your layout will look like this:

<div id="wrapper">
<div id="banner">banner</div>
<div id="menu">menu</div>
<div id="contentwrapper" class="clear">
<div id="content">
content
</div>
<div id="sidemenu">
sidemenu
</div>
</div>
<div id="footer">
footer
</div>
</div>

Then the basic CSS to achieve this layout is as follows:


#body {
text-align:center; // THIS IS FOR IE 5 SINCE IT DOESN'T UNDERSTAND MARGIN:AUTO
}

.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */

#wrapper {
width:700px;
margin:25px auto;
}

#banner {
width:100%;
height:100px;
}

#menu {
width:100%
height:25px;
}

#contentwrapper {
width:100%;
}

#content {
width:480px;
float:left;
}

#sidemenu {
width: 220px;
float:left;
}

#footer {
width:100%;
}

Get your basic structure set, then worry about getting your inner content positioned correctly.

Also, don't forget, when using the Box Model Hack, to do it correctly. Be nice to those browsers who understand both rule sets (otherwise known as the "Be Nice to Opera Rule")

Example:

#topwrapper .wrapper {
background:transparent url(/images/headerbg.gif) repeat-x;
margin:0 auto;
border-top:4px solid #FFF;
border-right:4px solid #FFF;
border-left:4px solid #FFF;
border-bottom:none;
text-align:left;
/* BOX MODEL HACK */
width:705px;
voice-family: "\"}\"";
voice-family:inherit;
width:697px;
}
html>body #topwrapper .wrapper {
width:697px;
}

Let me know how it works for you!