Image Gallery - 100% Width, Auto Positioning, Centering HTML and CSS layout issue

[sonesay 7]

Hey all, I am wondering if anyone can assist me in achieving a HTML and CSS layout I have been struggling with. I have looked at many image galleries available over the internet but none suits my needs. They are mostly fixed size widths and will look ugly if I go with that for my site. I need one that is able to expand depending on the users available browsers width and retract accordingly. This is probably a specific layout issue concerning HTML and CSS that I am still not fimilar with since I still cant solve my problem.


What I have done so far:
- I am able to fit in my gallery inside the content area which is auto expanding and have buttons for scrolling on the left and right hand side

What problems so far:
- I am able to add images in but when I try and control the display type to display-inline etc I get the wrapping of images coming across as shown in the attached image.
- I have tried putting the images inside a ul and li strcture and controlling them from there with display-inline and inline-block but they all seem to wrap. is there another property/combination I can try?
- also just having images without the ul li block has no effect


My current layout structure for the gallery

<div id="gallery_container_jqParent">                                <div id="si4_btn_gallery_left">                                    <button><</button>                                </div>                                <div id="si4_btn_gallery_right">                                     <button>></button>                                </div>                                <div id="gallery_container">                                   <!--<ul>                                        <li><img alt=""  src="images/gallery/imac.jpg" /></li>                                        <li><img alt=""  src="images/gallery/iphone.jpg" /></li>                                        <li><img alt=""  src="images/gallery/macbook.jpg" /></li>                                    </ul>-->                                        <img alt=""  src="images/gallery/imac.jpg" />                                        <img alt=""  src="images/gallery/iphone.jpg" />                                        <img alt=""  src="images/gallery/macbook.jpg" />                                </div>                            </div>

Again my requirements for the gallery are:

- Auto expanding 100% width
- Auto filling of content as width is resized to fit as many images as possible in the gallery area
- Auto centering of active gallery image
- smooth scrolling from left to right of images and loop back

if you see any examples that fit any of these criteria's please let me know. I have only been able to find fixed sized galleries which are too simple for my liking.


seems to be an issue with image uploading so http://error404.000webhost.com/?
Edited December 7, 2010 by sonesay (see edit history)

[nationmore 0]

do you mean you want to customize your image gallery. do you need some javascripts for this. i am building this image viewing gallery,.

beautfil designed, let me know if you need anything from me.