HTML/CSS How to auto-adjust the width of my container in order to show several images horizontally displayed?

Question

I want to have a variable amount of images displayed horizontally in a web (which can be navigated with an horizontal scroll bar), but I can't get the images displayed beyond the 100% width of the browser.

Since the amount of images will vary, I need to avoid setting a constant width to the container.

Here's the code I'm trying right now.

HTML:

    <div id="container-galeria">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
    </div>

CSS:

#container-galeria{width:auto;min-width:100%;height:auto;min-height:100%;}
#container-galeria img{float:left}

Hope I was clear and somebody can help me with this. Thanks in advance!

Answer 1

try this:

<div id="container-galeria">
       <ul><li> <img src="galeria1/1.jpg"></li>
       <li> <img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
    </div>

 ul {

  list-style:none; 
  white-space: nowrap;
}
li {
  float: left:
/*overflow-x:scroll; /*optional*/ */
width:120px;
  display: inline;
}

http://pastebin.com/8x6P8nA1