Al final he conseguido hacer algo. Lo he cambiado casi todo y ha quedado así. Lo pongo por si a alguien le sirve, y por si he cometido algún fallo burro o de estilo y alguien me quiere corregir....
Resumo lo que he hecho.A lo que sería la capa que contenía la tabla de las miniaturas le he dado un margin-left amplio para que me quede hacia la derecha, en vez de tablas he utilizado capas de miniaturas con display inline (así se me reordenan ellas solas, no tenía ni idea). Y he 'depurado' positions para que no haya absolutes a los que trate como algo externo al flujo del documento...
Fallo: utilizo max-with y max-heigth (para que la tabla contenedora no se me dispare por toda la pantalla) y me parece que de los explorers sólo el nuevo lo reconoce...
css:
body {background-color:#000000}
#ancla{
border:#CCCCCC solid 5px;
position:absolute;
top:7%;
height:80%;
width:98%;
overflow:auto;
}
#marco {
border-color:#CCCCCC; border-style:groove; border-width:5px;
position:static;
margin:25px 40px 50px 60px;
float:left;
}
#contenedora{
margin-left:auto; margin-top:auto;
position:relative;
max-width:408px;
max-height:300px;
overflow:auto;}
#contenedora img {
width:60px;
height:60px;
margin:1px;
border-style:double;}
#contenedora div {
display:inline;
position:relative;
background-color:#AD9805;
border-top:55px solid #AD9805;}
Html:
<body>
<div id="ancla">
<div id="marco"> </div>
<div id="contenedora">
<div>
<img src="casarbol.jpg" title="casa del árbol" OnClick="mostrar('casadelarbolg.jpg')"/>
</div>
.
.
.
<div>
<img src="bañera.jpg" title="en la bañera" onClick="mostrar('bañerag.jpg')" />
</div>
</div>
</div>
</body>
</html>
Supongo que habrá fallos, alguna cosa que sobre, o algún fallo de estilo o semántica... si lo hay por favor decidmelo y disculpadmelo... soy casi nuevo y aprendo sólo (sólo no, con los foros que ya es mucho).