I am assuming that this is a css problem as I am not sure that there is any html code that could help.

I've tried to program a sales page, with 3 classes side by side. The problem that I have is in each class there is a rollover to display an example. When I mouse over to activate the rollover it makes the classes to the right go down the page. They return when the mouse is taken off the image.

Is there a way to stop this?

I have tried z-index and display: block but these haven't worked. The css code is;

Code:
#keyrings {Position: relative;  /* the container */
           top: 20px;
           left: -360px;
           max-width: 240px;
           height: auto;
           padding: 10px;
          border: 1px solid black;
          font-family: comic sans ms;
          font-size: 0.80em;
           color: black;
          padding-left: 10px;
          }

.coast-1b {Position:relative;  /* main image */
           top: 5px;
           left: 10px;
           }

.sunset {                      /* the rollover image */
  display: none;   
  }

.keyring-1:hover + .sunset {    /* shows the hidden image */
  display: block;
  position: relative;
  top: 10px;
  left: 5px;
   box-shadow: 5px 5px 3px #888888;
     }
The html used for the roll over is;

HTML Code:
<div id="keyrings">
<div class="coast-1b">
<img class="keyring-1" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/coaster-scan/sunset.png" alt="Photo: sunset over the frozen sea" />
<img class="sunset" src="http://what-do-christians-believe.co.uk/wdcb-images/coasters/sunset.png" alt="sunset over the frozen sea">
</div>
</div>
you can see what happens here. Need to scroll about halfway down the url.