Float left not working in Internet Explorer 8

Question

At my site Family Law Act I am trying to get two horizontal rows of pictures/profiles stacked on top of each other. the top row is for one city, the bottom row of profiles is for another city. The top row is floated properly, but the bottom row, as you can see, is not floated. Rather the pics are vertically stacked on top of each other.

It works fine in Chrome and Firefox but in Internet Explorer 8 there's this problem.

Any ideas?

CSS

#Vancouver {float:left; display:block; }
.vancouver {float: left; padding-right: 10px;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; padding-right: 10px; }

HTML

<div id="Vancouver">
<div class="headVan">Vancouver</div>
<div class="vancouver a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li>
<li>Tom JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver c">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver d">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver e">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

</div>

<div id="New_York">
<div class"headvic">New York</div>
<div class="newyork a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li>
<li>Nat JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
<div class="newyork b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li>
<li>Jed JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
</div>

Solution 1

Floats generally work best when the containing div has a width

in your New york div try giving it a width ( the width of your content area - whatever it may be)

#New_York {
    clear: both;
    float: left;
    display: block;
    margin-top: 20 px;
    width: XXXXX px;
}

I would add this to your Vancouver div too.

Solution 2

Try replacing this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

with:

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE8">

<meta charset='utf-8'>

This solved me a similiar problem in a wordpress site. Maybe add a <div style="clear:both"></div> between the columns. Next step: try debugging with ie developer toolbar addin - would give you more information about where the problem comes from.