Float does not work in Internet Explorer 8

Question

On my website, Family Law Law I am trying to get two horizontal rows of images / profiles stacked on top of each other. top row for one city, bottom row of profiles for another city. The top row floats correctly, but the bottom row, as you can see, does not float. Rather, the photographs are vertically stacked on top of each other.

It works fine in Chrome and Firefox, but Internet Explorer 8 has 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> 

Answer 1

Floats usually work best when the containing div is wide

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

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

I would add this to your Vancouver div too.

Answer 2

Try replacing this:

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

from:

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

This resolved me a similar problem on the wordpress site. Perhaps add <div style="clear:both"></div> between the columns. Next step: try debugging using the addin developer toolbar - will give you more information about where the problem came from.

Answer 3

Based on your layout, it appears that you do not need float calls on wrappers ( #Vancouver and #New_York ), just on the content. If so, removing these floats solves your problem.

You can also clear on #New_York .