Liquid scrolling horizontal CSS div

HTML & CSS
1

Hi,

Just a simple (I think) little CSS thing here, but I can’t figure it.

I’m using WordPress as a CMS and I’ve got a two column layout. In the main/left column I want to put a horizontal scrolling CSS div box for scrolling images. Now, the thing is, I don’t want to fix the width of the scrolling div because the layout of the theme is pretty liquid.

The div is a bit like this:

<div style="width: 400px; height: 190px; overflow-x: scroll; overflow-y: hidden; padding: 5px;"><img src="image 1 here" /><img src="image 2 here" "etc." "etc." /></div>

If I make the width 100%, then the whole theme cracks because the images just push beyond the column the div is in and scrolling functionality vanishes. If I make the width a fixed width, like, for example, in the code above, then it’s going to be fine for my resolution and not for anyone elses. How can I make the div “liquidly” fill the column’s width but still retain scrolling functionality when images overflow horizontally? Would really appreciate some of your thoughts.

Thanks a lot.

2

Hi,

Use inline-block and white-space:nowrap:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
	margin: auto;
	padding:0;
	list-style:none;
	text-align: left;
	height: 215px;
	white-space: nowrap;
	overflow:scroll;
	overflow-x: scroll;
	overflow-y: hidden;
	position:relative;
	width:100%;/* ie6 needs this*/
}
.test li {
	width: 210px;
	height:180px;
	margin: 10px 10px 10px 0;
	background:red;/* for testing */
	display: inline-block;
	position:relative;
}
.test li a{display:block}
* html .test li {display:inline}/* ie6 inline -block fix*/
*+html .test li {display:inline}/* ie7 inline -block fix*/
</style>
</head>
<body>
<ul class="test">
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
</ul>
</body>
</html>

Or non-semantically as per your example::slight_smile:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
	margin: auto;
	text-align: left;
	height: 215px;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
	width:100%;
}
.test img {
	width: 210px;
	height:180px;
	margin-right: 10px;
	background:red;/* for testing */
	display: inline-block;
	margin: 10px 10px 10px 0;
}

</style>
</head>
<body>
<div class="test"><img src="image 1 here" /> <img src="image 2 here" /> <img src="image 3 here" /> <img src="image 4 here" /> <img src="image 5 here" /> <img src="image 6 here" /></div>
</body>
</html>
3

Hi, Paul. Thanks a lot. I really appreciate your time. It works perfectly. The first one is great. Excellent stuff. A thing of beauty. It fills the width of the column perfectly. The only thing that is a bit of a problem though is that when it is placed in a table, it seems to forget itself :). When I put it outside of a table, it works perfectly (in all IEs as well – and thanks, I really appreciate that attention to detail), but when it’s put inside a table, it stops working. Is there any way to force the table to play ball or force it to play ball with a table?

I thought that maybe the problem was to do with WordPress and I gave everything !importants :slight_smile: thinking it was that. But when I just put it in a plain vanilla static html document and tested it locally, it does the same thing. Outside of a table, works perfectly. Fills the column perfectly. Inside a table, it gives problems.

4

Hi,

I have to ask why you feel the need for a table as it is not tabular data as such and therefore the table structure is redundant for this example?

If you are already committed to tables then you would need the table-layout:fixed algorithm in order to stop the table from expanding. Otherwise tables will do as they always do and stretch to accommodate the unbroken content.

Here is an example wrapped in a table using table-layout:fixed.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test {
	margin: auto;
	padding:0;
	list-style:none;
	text-align: left;
	height: 215px;
	white-space: nowrap;
	overflow:scroll;
	overflow-x: scroll;
	overflow-y: hidden;
	position:relative;
	width:100%;/* ie6 needs this*/
}
.test li {
	width: 210px;
	height:180px;
	margin: 10px 10px 10px 0;
	background:red;/* for testing */
	display: inline-block;
	position:relative;
}
.test li a{display:block}
* html .test li {display:inline}/* ie6 inline -block fix*/
*+html .test li {display:inline}/* ie7 inline -block fix*/

table{width:100%;table-layout:fixed}
</style>
</head>
<body>
<table><tr><td>
<ul class="test">
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
	<li><a href="#"><img src="image  here" /></a></li>
</ul>
</td></tr></table>
</body>
</html>
5

That is working perfectly. Thank you. I’m doing a bit of tweaking on it and I’ll tell you why and also why I’m using a table here.

I’m doing a directory type site with listings of companies. The table has the company’s data. Along the lines of:

<td>Name</td><td>Blue Widget Manufacturing</td>
<td>Address</td><td>123 Any Road, Anywhere</td>
<td>Images</td><td>[your excellent div scroller]</td>

That’s where the image scroller fits into the table. Doing it with a fixed layout like that worked perfectly. The scroller fits nicely into that cell. Obviously though, the two table columns fill 50% each of the content column. So what I’ve done is given the first <td> on the left a width of 10% and that seems to have done the trick, so it’s more like

name: company name

Than

name:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .company name

(. . . . = space :))

Is that the right way to do it :slight_smile: And thank you again, Paul. That worked a treat. Really appreciate it.

6

Yes that should work :slight_smile:

7

Thanks, Paul. Appreciate your help here. That first css scroller you did is brilliant. Well done.