take out the margin left on the sidebar.
I also made a few modifications to your css (no need for an abs position on the wrapper)
Code:
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> <!--
body{
background-color: #e0d7cc;
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
}
div {
text-align:left;}
#wrapper{
width: 780px;
margin:auto;
}
#top{
width: 780px;
background-color: #FFDAB9;
}
#header {
float: left;
width: 592px;
height: 175px;
background-color: Olive;
}
#menu {
float: left;
width: 188px;
height: 175px;
background-color: #D2B48C;
}
#main {
float: left;
width: 592px;
background-color: Silver;
}
#sidebar {
float:left;
width:188px;
background-color: #f23456;
}
#footer{
width: 780px;
background-color: #AFEEEE;
clear: both;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="header">header</div>
<div id="menu"><p>menu</p></div>
<div id="main"><p>main body<br /> main body <br /> main body</p></div>
<div id="sidebar"><p>Sidebar</p></div>
<div id="footer"><p>Footer</p></div>
</div>
</body>
</html>