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!
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;
}