hello again everyone!

i had changed my layout width to 770px, but this screwed up my layout. Please CSS gurus tell me what i'm doing wrong here, because I don't get it anymore...I'm totally stuck. In IE7 there's all fine. Submenu with red background and columns in content area are ok too. But in other browser all different.

Web page address: http://www.whazzup.ee/map/

HTML:

Code HTML4Strict:
<!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>WHAZZUP.EE - seltskondliku melu allikas</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="styles/main.css" media="all" />
</head>
<body>
<div id="container">
  <div id="header">
    <div id="logo">
   	  <a href="http://www.whazzup.ee"><img src="gfx/whazzup_logo.gif" width="200" height="90" alt="Whazzup.ee" /></a>
    </div>
    <div id="ads">
      <img src="gfx/banner1.gif" width="468" height="60" alt="reklaam" />
    </div>
  </div>
  <div id="navigation">
    <div id="tabs">
    	<ul>
<li id="active"><a href="/w/index.php" title="Avaleht"><span>Avaleht</span></a></li>
<li><a href="/w/events/index.php" title="&Uuml;ritused"><span>&Uuml;ritused</span></a></li>
<li><a href="/w/catalog/index.php" title="&Uuml;rituste korraldamine"><span>&Uuml;rituste korraldamine</span></a></li>
<li><a href="/w/search/index.php" title="Otsing"><span>Otsing</span></a></li>
<li><a href="/w/my/index.php" title="Minu Whazzup"><span>Minu Whazzup</span></a></li>
</ul>
    </div>
    <div id="submenu">
    	<ul>
<li title="Uudised"><a href=""><span>Uudised</span></a></li>
<li title="Reklaam"><a href=""><span>Reklaam</span></a></li>
<li title="Portaalist"><a href=""><span>Portaalist</span></a></li>
<li title="Registreeru kasutajaks"><a href="/whazzup/register.php"><span>Registreeru kasutajaks</span></a></li>
</ul>
    </div>
  </div>
  <div id="content">
    <div id="left">
        see on vasak
    </div>
    <div id="main">
      Siin on peaaken
    </div>
    <div id="right">
      Siin on parem
    </div>
  </div>
  <div id="footer">
    Siia tuleb footer.
  </div>
</div>
</body>
</html>

And CSS:

Code CSS:
/*---------- SKELETON ----------*/
* {
	margin: 0;
	padding: 0;
}
 
html, body {
	background: #FFF;
	font: 100% Tahoma, Arial, Verdana;
	text-align: center;
}
 
#container {
	width: 770px;
	margin: 0 auto;
}
 
#content {
	width: 768px;
	border-left: 1px solid #4C4C4C;
	border-right: 1px solid #4C4C4C;
	padding: 10px 0 0 0;
}
 
#left {
	float: left;
	width: 134px;
}
 
#main {
	float: left;
	width: 500px;
}
 
#right {
	float: right;
	width: 134px;
}
 
#footer {
	height: 50px;
	border-left: 1px solid #4C4C4C;
	border-right: 1px solid #4C4C4C;
	border-bottom: 1px solid #4C4C4C;
 
	clear: both;
}
 
.clearfloats {
	clear: both;
	float: none;
}
 
/*---------- HEADER ----------*/
#header {
	margin: 0;
	padding: 0;
	background: url(../gfx/bg_header.gif) repeat-x;
	height: 130px;
	border-left: 1px solid #4C4C4C;
	border-right: 1px solid #4C4C4C;
}
 
#logo {
	float: left;
	margin-left: 30px;
	margin-top: 20px;
}
 
#header div img {
	border: none;
}
 
#ads {
	float: right;
	margin-right: 20px;
	margin-top: 35px;
}
 
/*---------- NAVIGATION (MAIN MENU) ----------*/
#navigation {
	background: #EBEBEB;
	border-left: 1px solid #4C4C4C;
	border-right: 1px solid #4C4C4C;
	width: 768px;
}
 
#tabs {
	float: left;
	width: 100%;
	line-height: normal;
}
 
#tabs ul {
	font-size: 0.75em;
	font-weight: bold;
	margin: 0;
	padding: 10px 0 0 150px;
	list-style: none;
}
 
#tabs li {
	display: inline;
	margin: 0;
	padding: 0;
}
 
#tabs a {
	float: left;
	background: url("../gfx/tab_left.gif") no-repeat left top;
	margin: 0;
	padding: 0 0 0 4px;
	text-decoration: none;
}
 
#tabs a span {
	float: left;
	display: block;
	background: url("../gfx/tab_right.gif") no-repeat right top;
	padding: 5px 15px 4px 6px;
	color: #000;
}
 
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span { float: none; }
 
/* End IE5-Mac hack */
#tabs a:hover span { color: #FFF; }
 
#tabs a:hover {
	background-position: 0% -42px;
}
 
#tabs a:hover span {
	background-position: 100% -42px;
}
 
#tabs #active a {
	background-position: 0% -42px;
}
 
#tabs #active a span {
	background-position: 100% -42px;
	color: #FFF;
}
 
/*---------- NAVIGATION (SUBMENU) ---------- */
#submenu {
	width: 100%;
	background: #8C0101;
	line-height: 25px;
 
	clear: both;
}
 
#submenu ul {
	margin: 0;
	list-style: none;
	margin: 0 0 0 20px;
}
 
#submenu li {
	display: inline;
}
 
#submenu a {
	font-size: 0.7em;
	float: left;
    margin: 0;
    padding: 0 5px;
    text-decoration: none;
	text-transform: uppercase;
}
 
#submenu a span {
	float: left;
    display: block;
    color: #EBEBEB;
}
 
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#submenu a span {
	float: none;
}
 
/* End IE5-Mac hack */
#submenu a:hover span {
	color: #000;
}
 
#submenu a:hover {
	background: url(../gfx/submenu_nav_bg_hover.gif) repeat-x top left;
}
 
#submenu a:hover span {
	background: url(../gfx/submenu_nav_bg_hover.gif) repeat-x top left;
}