Hover placement issue - css

Question

I am trying to create a box - in this case I've called it #rollover in the CSS & HTML - that has four images on the left side. When the end user rolls over each image on the left a larger version of the image appears to the right. The problem I am having is keeping the larger image on the right within the #rollover div.
CSS
#rollover{
width:739px;
height: 600px;
border: 3px solid;
padding-top:10px;
padding-left: 40px;
padding-bottom:10px;
float:left;}
.picture {
width:150px;
height: 150px;}
.picture a.small, .picture a.small:visited {
display:block;
text-decoration:none;
background:#ffffff;
top:0;
left:0;
border:0;}
.picture a img {
border:0;}
.picture a.small:hover {
text-decoration:none;
background-color:#000000;
color:#000000;}
.picture a .large {
display:block;
width:0;
height:0;
border:0;
top:0;
left:0;}
.picture a.small:hover .large {
position:absolute;
top:0;
width:550px;
height:550px;
left:160px;}
body{
margin:0;}
#main{
width:800px;
margin-left:auto;
margin-right:auto;}
#mast{
width:799px;
height:300px;
margin-top: 10px;
padding-top: 5px;
background-image: url(IFhalllogo.png);
background-repeat:no-repeat;}
#insidewrap{
width:749px;
margin:0;
padding:0;
border: 3px solid;
float:left;
border-color: #39C;}
HTML
<div id="rollover">
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/01-thumb.jpg" title="small image" />
<img class="large" src="op/01-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/02-thumb.jpg" title="small image" />
<img class="large" src="op/02-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/03-thumb.jpg" title="small image" />
<img class="large" src="op/03-large.jpg" title="large image" /></a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image"><img src="op/04-thumb.jpg" title="small image" />
<img class="large" src="op/04-large.jpg" title="large image" /></a>
</div>
</div>

Answer 1

Just to document: the solution here was to use position: absolute on the full size images, taking care to relative-position the container to make sure the images where positioned relative to that element:
#rollover{
position: relative;
/* ... */
}
.picture a.small:hover .large {
position:absolute;
top:0;
left:160px;
/* ... */
}

Answer 2

Try using absolute positioning on the hover event.
Here is the code, fiddle around with the top and left attributes to get it where you want.
Hope this helps.
CSS:
#rollover{
width:739px;
height: 600px;
border: 3px solid;
padding-top:10px;
padding-left: 40px;
padding-bottom:10px;
float:left;
}
.picture {
width:150px;
height: 150px;
}
.picture a.small, .picture a.small:visited {
display:block;
text-decoration:none;
background:#ffffff;
top:0;
left:0;
border:0;
}
.picture a img {
border:0;
}
.picture a.small:hover {
text-decoration:none;
background-color:#000000;
color:#000000;
}
.picture a .large {
display:block;
visibility:hidden;
}
.picture a.small:hover .large {
display:block;
visibility: visible;
position:absolute;
width:550px;
height:550px;
top:25px;
left:220px;
}
HTML:
<div id="rollover">
<div class="picture">
<a class="small" href="#nogo" title="small image">
<img src="op/01-thumb.jpg" title="small image" />
<img class="large" src="op/01-large.jpg" title="large image" />
</a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image">
<img src="op/02-thumb.jpg" title="small image" />
<img class="large" src="op/02-large.jpg" title="large image" />
</a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image">
<img src="op/03-thumb.jpg" title="small image" />
<img class="large" src="op/03-large.jpg" title="large image" />
</a>
</div>
<div class="picture">
<a class="small" href="#nogo" title="small image">
<img src="op/04-thumb.jpg" title="small image" />
<img class="large" src="op/04-large.jpg" title="large image" />
</a>
</div>
</div>