CSS: Horizontal scrolling with overflow-x
- by ams
Hello fellow programmers,
I was wondering if there still isn't a good way to get a div to stretch and scroll horizontally, according to the images inside.
-After all, it is 2011 now!
The mega-width does the trick, but leaves an empty mega-space if not filled with images.
If filled too much, images don't display. Same for the jQuery.
The situation below is the best I can do after hours of Googling, but it isn't reliable enough.
Thanks for your time.
Ams
* {
margin:0;
padding:0;
}
#one {
width:200px;
height:250px;
overflow-x:auto;
overflow-y:hidden;
}
#two {
width:10000em;
}
#two img {
float:left;
}
$(document).ready(function(){
var total=0;
$(".calc").each(function(){
total += $(this).outerWidth(true);
});
$("#two").css('width',total);
alert(total);
});
<div id="one">
<div id="two">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
</div>
</div>
