X overflow horizontal scroll

Question

I was wondering if there is still no good way to stretch a div and scroll horizontally according to the images inside. In the end, now is 2011!

mega-width performs the trick, but leaves mega-space empty if it is not filled with images.
If there is too much filling, images are not displayed. The same goes for jQuery. The situation below is the best I can do after hours of working at Google, but it is not reliable enough.

Thank you for your time.

---

 * { 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> 

Answer 1

It is easy. display:inline-block on images and white-space:nowrap on the parent.

Edit: I forgot that images are embedded by default, anyway :) That means white-space:nowrap is all you need.

 div { overflow-x:scroll; overflow-y:hidden; white-space:nowrap; } 

Live demo: http://jsfiddle.net/U4RsQ/2/

Answer 2

See Make CSS Separator Width Equal To Content , I think, for stretching. Then apply max-width to limit the width so that it is not super-huge. (And overflow: scroll if necessary.)

Answer 3

What worked for me with IE8:

msdn.microsoft.com/en-us/library/cc351024 (v = vs .85) .aspx

You can ensure that your page is displayed with the latest rendering by including the following meta tag in your header section:

 <meta http-equiv="X-UA-Compatible" content="IE=9" />