This is my layout, it works great.. Everything is aligned as I want it to be.

I have two problems with it:
1) IE 6.0 not tested [I'll get a VM or a friend's computer for that :-)].
2) FireFox doesn't show the horizontal scroll bar.
3) When IE 7.0 needs to show the horizontal scroll bar, it breaks the layout. The menu overshows, and there is another scrollbar that shows INSIDE the layout, around the "main" id div.

Any clues what I'm doing wrong?

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title here</title>

<style type="text/css">
html, body {
    background-color: #F7F7F7;
    font:normal 12px arial;
    margin:0;
    padding:0;
    border:0 none;
    overflow:auto;
    direction: rtl;
    text-align: center;
}
.container {
    padding-top: 10px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin: 0 auto; /*should work for FF, as I read.. */
}

.container #sidebar {
    float: right;
    width: 150px;
}

.container #maincontent {
    float: left;
    width: 700px;
}

.main {
    border: 1px solid #A8BACF;
    width: 850px;
    text-align: center;
}

#footer {
    clear: both;
    background: #F9F9F7 url('footer.png') repeat-x;
    padding: 8px;
    position: relative;
}

#page {
    text-align: right;
}


.menu2 {padding:0 32px 0 0; margin:0; margin-left: 0px; list-style:none; height:35px; background:#fff url(button1.gif); position:relative; /*border:1px solid #818993;*/ border-width:0 1px; border-bottom:1px solid #444;}
.menu2 li {float:right;}
.menu2 li a {display:block; float:left; height:35px; line-height:35px; color:#ccc; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu2 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu2 li.current a {color:#fff; background:url(button3.gif);}
.menu2 li.current a b {background:url(button3.gif) no-repeat right top;}
.menu2 li a:hover {color:#fff; background:#000 url(button4.gif);}
.menu2 li a:hover b {background:url(button4.gif) no-repeat right top;}
.menu2 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;}
.menu2 li.current a:hover b {background:url(button3.gif) no-repeat right top;}


</style>
</head>
<body>
<div class="container">
<div class="main">
<div id="header"><img alt="Header" src="header.jpg" /></div>
<div id="topmenu">
<ul class="menu2">
<li><a href="#nogo"><b>link</b></a></li>
<li><a href="#nogo"><b>link</b></a></li>
<li class="current"><a href="#nogo"><b>link</b></a></li>
<li><a href="#nogo"><b>link</b></a></li>
</ul>
</div><!-- end of top menu -->
<div id="sidebar">
Sidebar here.
</div><!-- end of sidebar -->
<div id="maincontent" style="margin-bottom: 5px;">
    <div id="page">
Content here.
    </div><!-- end of page -->
</div><!-- end of main content-->
<div id="footer">
Footer here.
</div>
</div> <!-- id="main" -->
</div> <!-- id="container" -->
</body>
</html>