1

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!

Nicolás Fuertes Finocchiaro
  • 13
  • 3

1 Answers1

0

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

argentum47
  • 2,385
  • 1
  • 18
  • 20
  • After 15min I think I finally understood what you meant by "accepting" and found the correct button lol First time using this website, sorry my poor english and thanks again for your help :) – Nicolás Fuertes Finocchiaro May 26 '13 at 00:00