ttmt
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>
PaulOB
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>
ttmt
3
Thanks Paul O’B, that’s perfect