Scroll to last floated image off screen

HTML & CSS
1

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.


<!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

Hi,

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

e.g.


<!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.


<!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

Thanks Paul O’B, that’s perfect