Dynamic Height /no of rows

[vikinggirl___]

I am a real php newbie, I am having to learn as I go along - no time for tutorials or books!

Background to my problem:
I am working on a Wordpress theme for my personal blog -Jo's site.
The layout is a centre column and two sidebars.

I just decided I want a fourth sidebar at the very right, floating at the right of the rest of the content.

The reason for the fourth sidebar is to display some images for decoration to the right of the content.
This is done at the moment, using a 1 column table, with one picture per row.

The images are set using the rand() function and an array. They are of no relevance other than decoration, so I only want images to be displayed as long as there is content in the right sidebar which is next to it.

Problem:
I would like the number or pictures display (img) or rows in the table to be dynamically set, depending on the height of the right sidebar.

i.e. something like this:

.outer_sidebar{height = $height_of rightsidebar}

[B]I'd like for enough rows / img to be produced until the height of the outer sidebar is equal to the length of the right sidebar! Some kind of "Loop until", I guess. [/B]

At the moment, the amount of rows in the table (and images to display) is static.

Please would you be able to point me in the right direction for how to go about achieving this? It's best done using php / javascript, right?
But how?

Best
Jo

[NogDog]

As PHP is running on the server, but the actual display processing is done in the client (the browser), there's really no way for PHP to know the actual display height of an element. My suggestion would be to take some number of the images you want to use and combine them into one vertical "strip" of images. Then use that as a background image using CSS to to a "repeat-y" within the containing element. You wouldn't even need a separate element for it: just add a padding-right value to the element which has the text in it, and specify a CSS background image position of 100% 0:

<style type="text/css">
.myClass {
  padding-right: 100px; /* adjust to desired amount of space for image "strip" */
  background: #fff url(imagename.png) repeat-y 100% 0;
}