Problematic transition from "left to right" to "right to left" in HTML

I have the following HTML code, in a language written and readable from left to right, the english language :

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="site.css">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="page">
    <div id="banner"></div>
    <div id="tagline">blah blah blah</div>
    <div id="menu">
    <div id="innermenu">
        <div class="menuitem activeitem"><a href="somepage1.html">blah</a></div>
        <div class="menuitem"><a href="somepage2.html">blah</a></div>
        <div class="menuitem"><a href="somepage3.html">blah</a></div>
        <div class="menuitem"><a href="somepage4.html">blah</a></div>
        <div class="menuitem"><a href="somepage5.html">blah</a></div>
        <div class="menuitem"><a href="somepage6.html">blah</a></div>
    </div>
    </div>
    <div id="main">
    <div id="languagebar" class="mainelement">
        <a href="somepage1.html"><img src="french.png" alt="french" height="4" width="6" id="french" class="flag" /></a>
        <a href="somepage1.html"><img src="english.png" alt="english" height="4" width="6" id="english" class="flag" /></a>
    </div>
    <div id="content" class="mainelement">
        <h1>blah</h1>
        <p>blah blah blah</p>
        <h1>blah</h1>
        <p>blah blah blah</p>
        <h1>blah</h1>
        <p>blah blah blah</p>
    </div>
    </div>
    <div id="footer">blah blah blah</div>
</div>
</body>
</html>

that I have to translate to a "right to left" language. Putting aside blah's translations, I first did the following thing : I added after the first line the following line :

<html dir="rtl" lang="XX">

where XX is the two letter HTML denomination of a right to left language. This added the intended behaviour : the language bar was indeed on the right, and the mainelement "table" was at its left, but as some blah's translations were too long, they were eated by the langage bar. I then tried something else : I removed the

<html dir="rtl" lang="XX">

line and did the following : I replaced all

<h1>...</h1>

and

<p>...</p>

from mainelement respectively by

<h1><blockquote dir="rtl" lang="XX">...</blockquote></h1>

and

<p><blockquote dir="rtl" lang="XX">...</blockquote></p>

which put the text from right to left nicely, and then I wanted to manage setting the language bar at the right and mainelement at the left, but without success. What am I doing wrong ?

EDIT

The css code is the following

body
{
background-color: #aaaaaa;
margin: 0px;
}

#page
{
margin: auto;
width: 940px;
background-color: #95bfca;
background-image: linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%);
background-image: -o-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%);
background-image: -moz-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%);
background-image: -webkit-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%);
background-image: -ms-linear-gradient(left top, rgb(208,226,231) 0%, rgb(0,102,128) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e2e7', endColorstr='#006680', GradientType=0 );
}

#banner
{
margin: auto;
width: 936px;
height: 122px;
background-image: url("banner.jpg");
}

#tagline
{
margin: 10px;
padding: 10px;
border: 2px solid #783201;
font: italic 22px calibri, sans-serif;
text-align: center;
background-color: #fff5db;
}

#main
{
padding: 20px 15px;
overflow: hidden;
position: relative;
}

.mainelement
{
background-color: #fff5db;
border: 2px solid #783201;
padding: 10px;
}

#main h1
{
margin: 20px 0px;
font-weight: bold;
font-style: italic;
font-family: calibri, sans-serif;
font-size: 15px;
}

#main div p, #main div li
{
font: 15px calibri, sans-serif;
}

#main a
{
font: 15px calibri, sans-serif;
color: #783201;
}

#main .expandable
{
text-align: center;
padding-left: 5px;
background-image: url("expand.png");
background-repeat: no-repeat;
background-position: left center;
}

.underline
{
text-decoration: underline;
}

.italic
{
font-style: italic;
}

.inlineh1
{
font: italic bold 15px calibri, sans-serif;
}

#languagebar
{
margin: 20px 15px;
width: 100px;
float: left;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.flag
{
margin: 5px;
border: none;
}

#french
{
background-image: url("French.png");
float: left;
}

#english
{
background-image: url("English.png");
float: right;
}

#content
{
width: 700px;
float: right;
}

#footer
{
margin: auto;
font: 12px calibri, sans-serif;
color: #ffffff;
text-align: center;
}

#footer a
{
font: 12px calibri, sans-serif;
color: #ffffff;  
}

/*** menu ***/

#menu
{
background-color: #783201;
border-top: 3px solid #783201;
border-bottom: 3px solid #783201;
}

#innermenu
{
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}

.menuitem
{
float: left;
margin: 5px 33px;
padding-bottom: 10px;
background-image: url("menutwiddle.png");
background-repeat: no-repeat;
background-position: center bottom;
}

.menuitem a
{
font: 18px calibri, sans-serif;  
color: #ffffff;
text-decoration: none;
}

.activeitem
{
    background: url('menu-line.png') repeat-x bottom left;
    position: relative;
}

.activeitem:before
{
    position: absolute;
    top: 0;
    left: -6px;
    bottom: 0;
    width: 6px;
    content: ' ';
    background: url('menu-ball.png') no-repeat bottom left;
}

.activeitem:after
{
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    content: ' ';
    background: url('menu-ball.png') no-repeat bottom left;
}

/*** form ***/

input[type=text], textarea
{
    border: 1px solid #783201;
}

input[type=submit]
{
    padding: 5px 15px;
    background: #783201;
    border-radius: 5px 5px;
    color: #fff;
    border: 0;
    box-shadow: 1px 1px 2px #888;
}

input[type=submit]:active
{
    box-shadow: 0 0 0 #fff;
}

Solution

I proceeded as follows : I created this rtl.css file :

body
{
direction: rtl;
unicode-bidi: embed;
}

#page
{
}

#banner
{
}

#tagline
{
}

#main
{
}

.mainelement
{
}

#main h1
{
}

#main div p, #main div li
{
}

#main a
{
}

#main .expandable
{
padding-right: 5px;
}

.underline
{
}

.italic
{
}

.inlineh1
{
}

#languagebar
{
float: right;
}

.flag
{
}

#french
{
float: right;
}

#english
{
float: left;
}

#content
{
float: left;
}

#footer
{
}

#footer a
{
}

/*** menu ***/

#menu
{
}

#innermenu
{
}

.menuitem
{
float: right;
}

.menuitem a
{
}

.activeitem
{
    background: url('menu-line.png') repeat-x bottom right;
}

.activeitem:before
{
    right: -6px;
    background: url('menu-ball.png') no-repeat bottom right;
}

.activeitem:after
{
    left: -6px;
    background: url('menu-ball.png') no-repeat bottom right;
}

/*** form ***/

input[type=text], textarea
{
}

input[type=submit]
{
}

input[type=submit]:active
{
}

and replaced in the html everywhere needed (that is, in the html files in language XX)

<link rel="stylesheet" type="text/css" href="site.css">

with

<link rel="stylesheet" type="text/css" href="site.css">
<link rel="stylesheet" type="text/css" href="rtl.css">