SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to keep multiple images on the same line inside a div with undeneath scroll bar

    Hi i have a div that i set the with a width i want to have a scroll bar under
    i have multiple images that i want all to be in one line but everytime the images run out space in the line it goes under i have tried float left but the image still goes under is there a way of keep in the same line inside a scrollable i am trying to avoid tables?

    Code:
        <div style="width:830; background-color:white; height:120px; overflow:scroll; overflow-x: scroll;overflow-y: hidden;">
          
          <img style=" float:left; display:inline" src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          
    
        </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You could do something like this:

    Code:
    <div style="width:830px; background-color:white; height:120px; overflow:auto;">
    		<div style="width: 2000px; height: 90px;">
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    			<img src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
    		</div>
    	</div>
    So, have an inner div with a big width wide enough to hold all the images.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to me that you have a div with overflow hidden, but nothing within that div is causing a scroll bar to be needed, nothing that exceeds the width of the container div, so the images are naturally wrapping.

    Try this.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>    <div style="width:750px; background-color:white; height:120px; overflow:scroll; overflow-x: scroll; overflow-y: hidden;">
           <div style="width:1000px;">
          <img style=" float:left; display:inline" src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"  src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" />
          <img style=" float:left; display:inline"   src="images_news/image1.gif" width="160" height="90" alt="bbc news special" /></div>
          
    
        </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, what ralph said.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This should explain all your options http://www.visibilityinherit.com/code/scroller.php

  6. #6
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    This should explain all your options http://www.visibilityinherit.com/code/scroller.php
    That's even better. Thanks for the link.

  7. #7
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much guys all you r ways worked wonderfully thank you

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome. Personally, I would use one of the techniques from the link because it allows you to have less structural markup, always a good thing. Just to let you know, I goofed by setting overflow:scroll and keeping the overflow-x and y. I would just do "overflow:scroll" for both in that case, since if you get an image that is too large a height, the user would not be able to see it if you have y set to hidden. I wouldn't hide an image just to keep it clean, as it restricts the user from obtaining useful content. I would just make sure the images are the same height in the first place.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •