Horizontal scrolling with overflow-x

Question

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.

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

score 17 · Accepted Answer · edited Jul 21 '12 at 19:28

17

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

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

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

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

edited Jul 21 '12 at 19:28

Nikola K.

7,093
13
31
39

answered Jan 04 '11 at 04:20

Šime Vidas

182,163
62
281
385

@Starx I don't have older versions of IE, but according to http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets%29 IE6 supports white-space:nowrap. I don't know about overflow-x and overflow-y, thou (in IE6, that is). – Šime Vidas Jan 04 '11 at 04:41
Your first example was enough to get me to smile. – ams Jan 04 '11 at 04:54
As long as you know the quirks with the IE6 box model, you'll be fine. If not, IE6's hasLayout only works when set to visible and with a height of 1%. http://reference.sitepoint.com/css/haslayout – rxgx Jan 04 '11 at 10:41
@SIME : how would you adapt this for the image to display on more than one line ? – Marcel Falliere Jan 05 '12 at 16:35
@MarcelFalliere Do you mean two (or more) rows of images? – Šime Vidas Jan 05 '12 at 19:59
@SIME yes ; I achieved it with css3 multi-column http://www.w3.org/TR/css3-multicol/ – Marcel Falliere Jan 06 '12 at 17:24

score 0 · Answer 2 · edited May 23 '17 at 11:48

0

See Make CSS Div Width Equal To Contents, I think, for stretching. Then apply a max-width to constrain width to not be super-huge. (And overflow: scroll if necessary.)

edited May 23 '17 at 11:48

Community

1
1

answered Jan 04 '11 at 04:16

Jeff Walden

7,008
2
38
55

2

Thanks all, i looooove stackoverflow so much – ams Jan 04 '11 at 04:57

score 0 · Answer 3 · answered Jan 05 '11 at 13:51

What worked for me with IE8:

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

You can ensure your page displays with the latest rendering by including the following meta tag in your page's head section:

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

Horizontal scrolling with overflow-x

3 Answers3