positioning problem

[trukje]

I've a positioning problem on a site of mine.
Site: http://www.resonans.be
On the index page you find three pictures of artwork on the bottom.
But for a strange reason the third image sometimes is positioned beneath the second one instead of on the right of it.
The problem seems to be occuring with IE and FF.
Everytime the page refreshes the images are ad randomly changed. Sometimes they are presented correctly, but for a magical reason the problem occurs now and then.
Can someone help me out with this please?

[Wickham]

I think these edits may make a difference, although I didn't download your images or javascript files, but I could see a difference in my test as the three grid4 divs were side by side. You shouldn't use id more than once so I changed them to class, but that wasn't the cure, other edits cured my test in IE7 and Firefox.


/*changed from #grid4 to .grid4*/
.grid4 {

float: left;
width: 300px;
margin-top: 20px;
margin-right: 8px;
margin-bottom: 20px;
margin-left: 8px;
}
.grid4 a { display: block; width: 300px; margin: 0; } /*new style*/
#main {
/*overflow:auto; deleted style*/
padding-bottom: 35px; /* must be same height as the footer
*/
margin: 0px auto;
width: 962px;
height: 100%;
background-color: #000;
border-left:2px solid #FFF;
border-right:2px solid #FFF;

}



<div style="clear: both;">

<div class="grid4">
<div class="centreren"><p><a
href="karel_appel.php">Karel Appel</a></p></div>
<a href="karel_appel.php" class="noline"><img
class="border" width="300" src="Appel/2.jpg"/></a>
</div>


<div class="grid4">
<div class="centreren"><p><a
href="alechinsky.php">Pierre Alechinsky</a></p></div>
<a href="alechinsky.php" class="noline"><img
class="border" width="300" src="Alechinsky/3.jpg" /></a>
</div>



<div class="grid4">
<div class="centreren"><p><a
href="corneille.php">Corneille (Guillaume Cornelis
van Beverloo)</a></p></div>
<a href="corneille.php" class="noline"><img
class="border" width="300" src="Corneille/6.jpg"/></a>
</div> <!--<br/> deleted-->
</div>