0

I'm trying to build a page where users browse certain flash games, and I create thumbnail <div>s for them. They work nicely at first, but when I click one game, and return to the browse page, the text coincides with the image, when I refresh, it becomes ok.

Wrong version: (after returning back) enter image description here

Right version: (at start and after refresh) enter image description here

There is no JavaScript running, so I do not change the styles of elements. The <div>'s with the problem has .css codes like:

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%;
}

So what could be the problem? Thanks in advance !

marvin
  • 365
  • 3
  • 7
  • 22
  • 4
    Please post yout HTML too. Also if you could create a jsfiddle replicating the problem that would be great. Last resort would be a link to your site. – Billy Moat Feb 15 '13 at 15:36
  • 4
    At first glance: there is no such thing as `float: top;` – dezman Feb 15 '13 at 15:37
  • @watson Logically, that would be a quite useful property (well `float: bottom`). – James Coyle Feb 15 '13 at 15:39
  • @OP Your problem most probably has to do with `width: 40%;` on `.game_thumbnail_div` but you should make a jsFiddle (google it) for me to make sure. – dezman Feb 15 '13 at 15:43
  • @watson I was just about to ask "What does float:top do?" Thanks for clearing that up! – Austin Mullins Feb 15 '13 at 15:45
  • @everybody I tried it and when it worked I thought it was correct :D. Here's the jsfiddle: http://jsfiddle.net/xbycA/4/ – marvin Feb 15 '13 at 16:02

1 Answers1

0

For starters, .game_thumbnail_div has a width and height that is too small. Either remove them or make the dimensions at least 286 x 140. Also, float:top doesn't do anything. I know you mentioned that you tried it and it worked but I promise you it's not needed.

Updated fiddle.

MiniRagnarok
  • 959
  • 11
  • 23