Forum Moderators: not2easy
e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
html {
background-color: #ccc;
height: 100%;
}
body {
background-color: white;
width: 770px;
margin: 0 auto;
min-height: 100%;
}
.thumbs {
overflow-x: scroll;
background-color: #555;
padding: 5px 5px 0 5px;
white-space: nowrap;
}
.thumbs img {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<p>ipso</p>
<div class="thumbs">
<img src="1.jpg" alt="one" />
<img src="2.jpg" alt="two" />
<img src="3.jpg" alt="three" />
<img src="4.jpg" alt="four" />
<img src="1.jpg" alt="five" />
<img src="2.jpg" alt="six" />
<img src="3.jpg" alt="seven" />
<img src="4.jpg" alt="eight" />
</div>
<p>ipso</p>
</body>
</html>
There are a few issues in different reaction from different browsers: opera doesn't add the space for the descenders, and all FF3, safari forget to add the padding of the div on the right.
Equally getting control over the whitespace in between the images isn't going to happen easily.
Still it's a start.
If you want to add e.g. a caption and wrap the images in e.g. a div, you'll need to add display: inline-block on those divs.
I didn't try it in legacy IE versions yet, so I've no idea how it'll behave there.
You can get for more control if you know how wide it all turns out to be ...
