Почему эти img не учитываются в родительском div?

Question

Изображения внизу arent't учитываются в переполнении: скрытый атрибут во всем классе. Они переполняются, и позиционирование очень сложно, так как граница всего div не соответствует изображениям вниз.

<div class="all"> 
    <div id="banner"><img src="images/banner1.jpg" alt="PCXD Banner"/></div> 
    <div class="nav"> 
     ... 
    </div> 

    <h1 class="under"><br/><br/>Image><br/></h1> 

    <table> 
     ... 
    </table> 

     <img id="reviewI1" src="images/RL1.jpg" alt="Rocket League 1"/> 
     <img id="reviewI2" src="images/RL2.jpg" alt="Rocket League 2"/> 
     <a href="http://store.steampowered.com/app/252950/"><img id="steam2" src="images/steam.png" alt="Steam"/></a> 
</div> 

CSS:

.all{ 
width:1200px; 
margin:auto; 
border:5px solid #404040; 
overflow:hidden; 
} 

#reviewI1 { 
width:500px; 
position:absolute; 
top:415px; 
left:1010px; 
border: 3px solid #fedd58; 
} 

#reviewI2 { 
width:500px; 
position:absolute; 
top:710px; 
left:1010px; 
border: 3px solid #fedd58; 
} 

#steam2 { 
width:100px; 
left:1210px; 
position:absolute; 
top:1010px; 
} 

Answer 1

Вы должны добавить высоту к классу .all например, высота: 400 пикселей;

Answer 2

Ваши фотографии находятся в absolute положении, что означает, что они из потока DOM. Таким образом, имущество overflow не применяется в этом случае. Вы должны удалить абсолютное положение, чтобы использовать его:

#reviewI1 { 
    width:500px; 
    top:415px; 
    border: 3px solid #fedd58; 
} 

See this fiddle

Answer 3

Удалить «позицию: абсолютная» от стиля образы.