Image in a divs affects external divs

Right now Im trying to put an image on the top of a div. The divs are in horizontal, and I don´t know why, but when I put the image its position affects all external divs... I mean, the image should only affect the div in which I put it.

I know this can be a little bit difficult to undestand, I took a capture of my divs: Capture. As you can see, the height of my image affects the external divs.

Here is the HTML code:

     <div class="hoteles">
        <div class="head-hoteles">Los mejores hoteles</div>
        <div class="hotel"><img src="images/hotels/hotel-bellevue.jpg" alt="Hotel Bellevue"></div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
        <div class="hotel">Hotel1</div>
     </div>

And the CSS:

.hoteles{
 background-color: pink; 
 height: 100%; 
 width: 65%; 
 float: left; 
 padding-left: 2%; 
 }

.head-hoteles{
width: 100%; 
height: 100px; 
background-color: yellow; 
padding: 5%; 
font-size: 1.5em; 
}

.hotel{
height: 12.5em; 
min-width: 23%; 
display: inline-block;
background-color: brown; 
margin-bottom: 2%; 
}

.hotel img{   
width: 100px; 
}

Other question is... when I put "width 100%" its does not do it, I just can resize the image with pixels... Thanks !