Click to See Complete Forum and Search --> : Floated DIVs not clearing properly in IE7 (and, I suppose, IE6)


DJRobThaMan
02-13-2007, 09:51 AM
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:


<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


CSS:


.end
{
clear: both;
}

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

.right
{
float: right;
clear: right;
width: 29em;
}


Thanks a lot,
Douglas

grumpyoldtechs
02-13-2007, 10:30 AM
validate your HTML first(HTML 4.01 strict or xHTML 1.0 strict):
<div class="menuBottom"</div>

i found that within 5 seconds of looking at your code

ToonMariner
02-13-2007, 11:26 AM
If you have IE7 and want the old versions to test your sites on...

http://tredosoft.com/Multiple_IE

DJRobThaMan
02-13-2007, 12:54 PM
Yep,

@grumpyoldtechs Have since found that error and fixed it.

Thanks,
Douglas