Странное поведение css, исправления после обновления

Question

Я пытаюсь создать страницу, где пользователи просматривают определенные флеш-игры, и создаю для них миниатюру <div>. Сначала они работают хорошо, но когда я нажимаю одну игру и возвращаюсь на страницу обзора, текст совпадает с изображением, когда я обновляюсь, он становится ок.

Неправильный вариант: (после возвращения)

Правая версия: (при запуске и после обновления)

Там нет JavaScript работает, поэтому я не меняю стили элементов. В <div> «s с проблемой имеет .css коды, такие как:

div.game_side_texts 
{ 
clear:right; 
float:top; 
max-height:80%; 
} 

img.gamethumb 
{ 
height:80%; 
} 

div.game_img_div 
{ 
float:left; 
margin-right:2%; 
min-width:30%; 
} 

.game_thumbnail_div /* the div that contains everything */ 
{ 
float:left; 

width:40%; 
height:20%; 

margin-top:6%; 
margin-right:1%; 

padding-bottom:3%; 
} 

Так что может быть проблема? Заранее спасибо !

Answer 1

Для начала .game_thumbnail_div имеет ширину и высоту, которая слишком мала. Удалите их или сделайте размеры не менее 286 x 140. Также float:top ничего не делает. Я знаю, что вы упомянули, что вы это пробовали, и это сработало, но я обещаю вам, что это не нужно.

Updated fiddle.