My images are displaying incorrectly in IE 11 only - html

Question

Hi HTML5 and CSS newbie here,
We had to create an interests page for our final project so I used 8 images stacked left to right contained in individual div containers with a caption that only appears when you hover over the photo. It looks fine in Chrome and Firefox, but in IE all the photos are everywhere. Any help would be appreciated:
HTML:
<section>
<div class="interests">
<img src="music.png" alt="Musician" id="musician">
<p class="caption" id="musicP">I love all genres of music.</p>
</div>
<div class="interests">
<img src="movies.png" alt="Popcorn" id="popcorn">
<p class="caption" id="movieP">Favorite romance comedy is Sleepless in Seattle</p>
</div>
<div class="interests">
<img src="reddit.png" alt="Reddit" id="reddit">
<p class="caption" id="redditP">I love Reddit. I spend way too much time there.</p>
</div>
<div class="interests">
<img src="reading.png" alt="Books" id="books">
<p class="caption">I only read fiction books.</p>
</div>
<div class="interests">
<img src="cooking.png" alt="Cooking" id="cooking">
<p class="caption" id="cookingP">Favorite food is sushi</p>
</div>
<div class="interests">
<img src="videogames.png" alt="Video Games" id="games">
<p class="caption">I'm playing Animal Crossing right now.</p>
</div>
<div class="interests">
<img src="football.png" alt="Football Game" id="football">
<p class="caption">My favorite player is Peyton Manning!</p>
</div>
<div class="interests">
<img src="travel.png" alt="Globe" id="travel">
<p class="caption">I'd like to visit Germany soon.</p>
</div>
</section>
CSS:
/*Styles for the Interests Page*/
/*Floats all the photos to the left*/
.interests {
float: left;
}
/*Styles for individual photos*/
#cooking{
height: 180px;
margin-left: 100px;
}
#books{
width: 240px;
height: 169px;
}
#games{
height: 180px;
}
/*Photo Caption Styles*/
.caption{
font-size: 70%;
visibility: hidden;
opacity: 0;
}
.interests:hover .caption{
visibility: visible;
opacity: 1;
}
#cookingP{
margin-left: 100px;
width:200px;
}
Thanks!

Answer 1

instead of
<img src="music.png" alt="Musician" id="musician">
close all your images to have a closing
<img src="music.png" alt="Musician" id="musician"/>
you are missing / in your image tags

Answer 2

Don't use floats. Use display:table on the <section> tag, display:table-cell on all the interest class divs, and wrap a div around the rows with the style display:table-row.
http://www.w3schools.com/cssref/pr_class_display.asp