SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll to last floated image off screen

    Hi all

    I have a demo here - http://www.ttmt.org.uk

    It's just a simple list of images that are floated off screen.

    The images float off screen because I have set the width of the container to allow them to float.

    If I scroll to see the images it scrolls past the last image to just plank space.

    How do I set the width of the container to allow the images to float but stop the scrolling at the last image.


    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      
      <!--css-->
      <link rel="stylesheet" href="css/master.css" />
      
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        ul{
          width:100%;
        }
        li{
          list-style:none;
          float:left;
          margin:0 10px 0 0;
        }
        .wrap{
          padding:20px;
          overflow:auto;
          width:5000px;
          background:#eee;
        }
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
      <div class="wrap">
        <ul>
          <li><img src="01.jpg" /></li>
          <li><img src="02.jpg" /></li>
          <li><img src="03.jpg" /></li>
          <li><img src="04.jpg" /></li>
          <li><img src="05.jpg" /></li>
        </ul>  
      </div>  
      
    </body>
    
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can use display:inline-block and white-space:nowrap and avoid using a width.

    e.g.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Title of the document</title>
    
    <!--css-->
    <link rel="stylesheet" href="css/master.css" />
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    ul { white-space:nowrap ;	padding:20px;}
    li {
    	list-style:none;
    	display:inline-block;
    	vertical-align:top;
     *display:inline;/* ie7 inline block fix*/
     *zoom:1.0;/* ie7 inline block fix*/
    	margin:0 7px 0 0;
    	white-space:normal;
    }
    .wrap {
    	overflow:auto;
    	width:100%;
    	background:#eee;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    		<ul>
    				<li><img src="http://www.ttmt.org.uk/01.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/02.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/03.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/04.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/05.jpg" /></li>
    		</ul>
    </div>
    </body>
    </html>

    If you want the scrollbar on the browsers window then do this instead.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>Title of the document</title>
    
    <!--css-->
    <link rel="stylesheet" href="css/master.css" />
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    ul { white-space:nowrap ;	padding:20px;}
    li {
    	list-style:none;
    	display:inline-block;
    	vertical-align:top;
     *display:inline;/* ie7 inline block fix*/
     *zoom:1.0;/* ie7 inline block fix*/
    	margin:0 7px 0 0;
    	white-space:normal;
    }
    .wrap {
    	float:left;
    	background:#eee;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    		<ul>
    				<li><img src="http://www.ttmt.org.uk/01.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/02.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/03.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/04.jpg" /></li>
    				<li><img src="http://www.ttmt.org.uk/05.jpg" /></li>
    		</ul>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    368
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B, that's perfect


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
  •