img in div breaking at edge instead of scrolling

  • susancbk
  • Proficient
  • Proficient
  • susancbk
  • Posts: 293
  • Loc: New York City

Post 3+ Months Ago

I have a div containing a bunch of images ("bars" in a graph) which should all display next to one another. The total width of all the images is greater than the width of the div - so the div is supposed to have a x scroll bar.

However, instead what its doing - when the images reach the edge of the div - they start showing on the next line.

see here :
http://www.susanbuck.net/mood/test.php

code:
Code: [ Select ]
<div style="width:400px; height:277px; overflow-x:scroll">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
    <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
</div>
  1. <div style="width:400px; height:277px; overflow-x:scroll">
  2.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  3.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  4.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  5.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  6.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  7.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  8.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  9.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  10.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  11.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  12.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  13.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  14.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  15.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  16.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  17.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  18.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  19.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  20.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  21.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  22.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  23.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  24.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  25.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  26.     <img src="http://www.susanbuck.net/mood/images/squares/pos4.png">
  27.     <img src="http://www.susanbuck.net/mood/images/squares/neg4.png">
  28. </div>
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Just add this to the style attributes:
Code: [ Select ]
white-space: nowrap;

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 27 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.