在IE 9+中Javascript侧菜单无法正确呈现

Question

我在http://booktravelbound.net/experienceamerica有一个互动地图，当有人点击红色别针时会弹出一个侧边菜单。不幸的是，侧边菜单在IE 9+中无法正确显示。它可以在Google Chrome，Firefox和Safari中正确显示。

酒店或观光旅游的形象和描述应该是紧挨着的。书面内容似乎被推倒了。

是否有人能够确定问题所在？我确实更改了元标记以模拟IE 8，当我这样做时，侧边菜单工作正常，但我丢失了我的网络字体，所以我宁愿不这样做。

这是侧边菜单的screenshot of what it looks like和CSS，我感谢任何帮助。

CSS：

@CHARSET "UTF-8";
 .side-menu {
 font-family: "Open Sans";
 }

.hotel-block {
display: inline-flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
margin-left: 10px;
margin-right: 10px;
}

.hotel-list-element {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
}

.city-name {
width: 100%;
text-align: center;
font-family: "Open Sans";
}

.city-name > span{
font-weight: bold;
font-size: 22px;
color: #58595B;
font-family: "Open Sans";
}

.recommended-title {
 text-align: center;
 margin: 10px;
 font-family: "Open Sans";
 }

.recommended-title > span{
display:inline-block;
padding: 5px;
border: 1px solid;
border-radius: 3px;
font-weight: bold;
font-size: 20px;
color: #58595B;
font-family: "Open Sans";
}

.hotel-name {
font-size: 17px;
color: #F36C21;
text-align: center;
font-family: "Open Sans";
}

.hotel-description {
font-size: 12px;
color: #58595B;
text-align: center;
font-family: "Open Sans";
}

.hotels-list {
padding: 0;
margin: 0;
min-width: 200px;  
font-family: "Open Sans";
}

.more-info-button >a{
color: #FFFFFF;
background-color: #F36C21;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 7px;
display:inline-block;
text-align: center;
font-family: "Open Sans";
}

.tour-name {
 font-size: 17px;
 color: #F36C21;
 font-family: "Open Sans";
 }

.tour-description {
font-size: 12px;
color: #58595B;
font-family: "Open Sans";
}

.hotel-list-element {
position: relative;
/*margin: 0;*/
margin-top: 5px;
margin-bottom: 5px;
/*padding-bottom: 10px;*/
padding-left: 5px;
padding-right: 5px;
box-sizing: inherit;
/*border: 1px solid;
border-radius: 5px;*/
}

.hotel-img, 
.hotel-img-ie {
width: 200px;
height: 200px;
background: center no-repeat;
background-size: 200px 200px;
flex-shrink: 0;
}


/*float styles*/
.hotel-img-ie {
float: left;
clear: both;
}

.hotel-block-ie {
float: right;
text-align: center;
margin-left: 10px;
margin-right: 10px;
max-width: 200px;
}

.left-button-ie {
float: left;
}

.right-button-ie {
 float: right;
 }

.clearfix:after { 
 content: "";
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
 }