TABLE, DIV, SPAN outlining hell! Who can make sence out of this?

[Michel]

I hate those TABLE, DIV, SPAN, outlining stuff like position, width,
height, ....

Whatever I try it never what I want or suspect!

I have tried 3 full days to understand it with prg/try/error technics.
But whatever I try it's never what I want

What I want is on top a horizontal scroll that looks like a film-rol
Made up out of each found picture in some map. This way new pics have
just to be uploaded.

| browser-window |

-------------------------- ---
|O O O O O O O O O O O O O |
---------------------------
| | 30% Window height with only a
|JPG JPG JPG JPG JPG JPG JP|
| | X-scrollbar to loop through thumbs
--------------------------
|O O O O O O O O O O O O O | and a repeating GIF on top and bottom.
--------------------------
|< [ ] >| Thumbs resized accordening windowsize
-------------------------- ---
| | |
| | |
| displaying | text of |
| choosen | displaying | 70% height exactly
| jpg | jpg |
| auto-fit | |
| | |
| | |
-------------------------- ---

Why does height:30% not stick to it when I put stuff in it and even
use overflow:hidden?!
Why is the table more width than the window and/or the pictures in it,
when even those pictures are made smaller than the window?!
examples:
<div style="height:30%; border:1 solid yellow;">
<div style="background:url(images/filmboord-v.gif); border:1 solid
red;">
&nbsp;
</div>
<div style="white-space:nowrap; overflow:hidden; border:1 solid
yellow;">
<img src="images/films/Binge & Purge-t.jpg" height="100%">
<img src="images/films/Binge & Purge-t.jpg" height="100%">
</div>
<div style="background:url(images/filmboord-v.gif); border:1 solid
red;">
&nbsp;
</div>
</div>

<table cellpadding="0" cellspacing="0" style="border:1 solid red;
width:100%; height:30%;">
<tr>
<tr>
<td style="white-space:nowrap; width:100%; height:100%;">
<img src="images/films/Binge & Purge-t.jpg" style="height:100%;
margin-left:6;">
<img src="images/films/Binge & Purge-t.jpg" style="height:100%;
margin-left:6;">
</td>
</tr>
</table>

 

[Spartanicus]

What I want is on top a horizontal scroll that looks like a film-rol
Made up out of each found picture in some map. This way new pics have
just to be uploaded.

| browser-window |

-------------------------- ---
|O O O O O O O O O O O O O |

Attempting to resize images in a UA by specifying incorrect dimensions
is a bad idea, physically resize the thumbnails instead.

Attempting to resize content images to a percentage of the viewport's
height is an even worse idea.

Other than that the main problem is that IE's support for the css
overflow property is poor (IE 5.5 anyway), so poor that I'd suggest
changing the design.