Floated DIVs not clearing properly in IE7 (and, I suppose, IE6)

Hi,

I was wondering if anyone could help me with this. The pages shows nicely (almost… still need to worry about the div with the main content that’s floated right) in firefox, but in IE7 (so I’m assuming this happens in IE6 as well) the divs that are floated left are displayed beside each other as opposed to one on top of the other. Does anyone know how I can fix this? Here is the relevant code:

HTML:

[code]
<div class=”left”>
<div class=”img”></div>
<img alt=”Halcyon Villa” src=”/images/halcyon.gif”>
</div>
<div class=”right”>
<div class=”menuTop”></div>
<ul class=”menu”>
<li><a class=”active” title=”Go back to our main page” href=”/”>Home</a></li>
<li><a title=”Discover more about Halcyon” href=”/information”>Information</a></li>
<li><a title=”Look through images of Halcyon and its surroundings” href=”/gallery”>Gallery</a></li>
<li><a title=”Need more information? Contact us” href=”/contact”>Contact Us</a></li>
<li class=”end”></li>
</ul>
<div class=”menuBottom”</div>
</div>
<div class=”left”>
<h2 class=”about”><span>About Us</span></h2>
<p>Halcyon Villa is located above San San beach near Port Antonio. San San is a few miles east of Port Antonio and 2&frac12; hours from Norman Manley Airport in Kingston.</p>
<p>The house has 4 bedrooms with ensuite bathrooms. It sleeps a maximum of 8 guests and there is a hammock room at the top of the house, which is pure relaxation. There is a large deck where one can loll all day and look at the scenic views of the Caribbean Sea, Alligator Head and Monkey Island or the hills which are a part of the Blue Mountain range.</p>
</div>
<div class=”right”>
<h2 class=”welcome”><span>Welcome</span></h2>
<p>…etc
[/code]

CSS:

[code]

.end
{
clear: both;
}

.left
{
float: left;
clear: left;
width: 299px;
}

.right
{
float: right;
clear: right;
width: 29em;
}
[/code]

Thanks a lot,
Douglas

Also in #CSS _↴