Positon problem

[tolis]

Hello
I try to convert my site http://www.easytraveller.gr using css and have a problem positioning 2 div one next to the other

I have 3 lines. In the first line the 2 div are ok
In the second and third line the 2 divs of each line are ok only in internet explorer but not in Firefox, Netscape and Opera
The css code :

#Midleft {
padding: 0px;
margin-left:5px;
clear: right;
height: 100px;
width: 550px;
position: inherit;
background-color: #33CCCC;
border: 1px solid #FFFFFF;
margin-top: 15px;
float: left;
display: inline;
}
#Midright {
padding: 0px;
margin-right:5px;
clear: left;
float: right;
height: 100px;
width: 190px;
border: 1px solid #FFFFFF;
position: relative;
background-color: #33CCCC;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
display: inline;
}

The html code is
<div id="Midleft"> <span class="style7">Select your accommodation:</span>
<p>
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
<p>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul></div></li>
<div id="Midright"><h2>Plan your holidays</h2></div>
<div id="SpaceBox"></div>
<div class="clearit"></div>
<div id="Lowleft"><h2 align="center">Select your accommodation</h2></div>
<div id="Lowright"><h2 align="center">Plan your cruise</h2></div></li>
</ul>
<div id="Placeholder2"></div>
<div class="clearit"></div>
<div id="Placeholder2"></div>
<div class="clearit"></div>

Can any one check and tell me where is the mistake?
I tried all possible combinations of the position and display but no luck
Thanks
Tolis

[Rob]

you need to use:-
float:left on the first block (Midleft).