Welcome to WebmasterWorld Guest from 34.201.121.213

Forum Moderators: not2easy

Message Too Old, No Replies

floating divs horizontally with scrollbar

     
10:13 am on Mar 19, 2009 (gmt 0)

New User

10+ Year Member

joined:Mar 19, 2009
posts: 3
votes: 0


I'm trying to create an image bar(div.container) that should consist of indefinite amount of thumbnails(div.thumb). The way I would like it to behave is to have fixed height/width, only the horizontal scrollbar and so that the thumbnails don't spill out when they reach the right side of the div.container.
I've been messing with float:left, overflow-x and y and while overflow-y:hidden does produce the required visual effect, it doesn't account for the thumbs that spilled and wrapped on the right side of div.container.
So, basically, a one line thumbnail bar.
10:58 pm on Mar 21, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


I know of one way to make something overflow a box with an unknown amount in it: make it inline and turn of wrapping.

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

11:01 pm on Mar 21, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


Oh, I almost forgot: overflow-x is a CSS3 property, not part of the CSS2.1 standard, but all browsers that matter implement this already since a long time. So it'll bark during validation (rightfully so), but it'll display properly in any browser that matters.
12:13 pm on Mar 22, 2009 (gmt 0)

New User

10+ Year Member

joined:Mar 19, 2009
posts: 3
votes: 0


Is it possible to do the same if the children of thumbs are floated divs instead of images?
That's the only difference between my code and yours and it's not working...
4:49 pm on Mar 22, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 0


drop the float and make them "display: inline-block"
5:03 pm on Mar 22, 2009 (gmt 0)

New User

10+ Year Member

joined:Mar 19, 2009
posts: 3
votes: 0


thanks