How to put a list of images in a fixed div

Question

I've got a lateral fixed div (like a menu bar) and I am trying to figure out how i could put images in there, in a table-like view (for example 3 columns and X rows) knowing that those images are dynamically generated.

To be more specific, I would have 10 images to put in there. I can put them there just in html, but then javascript is gonna display or not certain images depending on various factors (mostly user privilegies), and so I would like those images to re-order automatically.

I'm more a JS than a CSS fan so I would place the images in fixed and use a script to handle their top and left properties, but I am sure there is some way of doing this with css (not css3, I am trying to do some retro-compatibility) or any other simpler way.

Thanks a lot

Answer 1

I think this is what you need. http://jsfiddle.net/x6zfW/10/

Please confirm.

HTML:

<div id="ui_myMenu">
            <div id ="ui_ui_myMenuTitle">HELLO TITLE</div>
            <img id="ui_image1" class="ui_menuIcons" src ="http://www.designworks.co.nz/uploads/images/case-studies/nz-post/post_button.jpg"/>
            <img id="ui_image2" class="ui_menuIcons" src="http://t2.ftcdn.net/jpg/00/24/77/15/400_F_24771516_GheG3ehk2o3T6mJJkFy9k2siYoMrVigc.jpg"/>
</div>

CSS:

 #ui_myMenu{
position: fixed;
    bottom: 15%;
    width: 575px;
    height: 426px;
    left: 2%;
    top:2%;
    background:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg') left top no-repeat;
}
#ui_myMenuTitle{
    margin-left: 16%;
    margin-top: 4.8%;
    font-size: 380%;
}
.ui_menuIcons{
    float: left;
    width : 5%;
    height : 7%;
}