Back To Website Design Forum

img in div breaking at edge instead of scrolling

  • susancbk
  • Proficient
  • Proficient
  • No Avatar
  • Joined: Nov 13, 2004
  • Posts: 293
  • Loc: New York City
  • Status: Offline

Post March 11th, 2008, 12:33 pm

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>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 11th, 2008, 12:33 pm

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post March 11th, 2008, 1:20 pm

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 151 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.