Trouble with a scrolling div containing text + images

**LittleIck** · Aug 19, 2012 02:24

Hi folks,

I'd appreciate any advice you can offer me. I might just be missing the fix for this out of sheer fatigue.

I'm working with a scrolling div styled with "width: 100%" (identical to the one on my current site http://notionalanthem.com). I want to add fixed-width blocks of text between some of the images, and retain the scrolling/overflow properties of the div. The closest I've got to succeeding with this is by using a series of unordered lists and appropriate styling options for each. So far (after messing around with divs and span classes instead of lists) I have got the text to display correctly in line with the images, but have lost the scrolling functionality: now, if the browser window is not wide enough to display the contents of my div, the overflowing list(s) are wrapped down and out of the visible area. No matter what I try, I cannot get the div contents to behave in this configuration. The "white-space: nowrap" property is set for the div, so...what am I missing? The relevant HTML and CSS is below.

Code:

<div id="div_content" class="flexcroll">
<ul id="content_inside">
<li><a href="images/taffin_lg.gif" rel="shadowbox"><img src="images/taffin_thumb.gif" alt="Taffin" width="301" height="400" /></a></li><li><img src="images/evoident.png" id="ident" alt="The Evolution of Identity" width="472" height="400" /></li>
</ul>
<ul id="inlinetext">
<li>“Tsunami”<br />
First Wave - c. 2002<br /><br />
I always assumed that if you had a logo, it meant you’d made it. So, when I first started playing around with graphics, I made my own. At the time I was faintly obsessed (I still am, if I’m honest) with Eastern pop-culture, so named my theoretical company "Tsunami" and used the Japanese katakana character <em>pi</em> (<em>hi</em> with a <em>handakuten</em> diacritic) in white on a coloured circular ground for a logo...coz it looks like a “t”, see? Even at this stage I had the idea of using different colours for different applications: blue for use on materials, pink for the website, green for printed promo stuff. None of these myriad scenarios ever came to anything, though.</li></ul>
<ul id="content_inside">
<li><a href="images/timewolf_lg.gif" rel="shadowbox"><img src="images/timewolf_thumb.gif" alt="Time of the Wolf" width="300" height="400" /></a></li>
<li><a href="images/child_lg.gif" rel="shadowbox"><img src="images/child_thumb.gif" alt="The Child" width="300" height="400" /></a></li>
</ul>
</div>

Code:

ul {
margin: 0px;
padding: 0px;
float: left;
}
li {
list-style-type: none;
display: inline;
}
#div_content {
width: 100%;
height: 427px;
clear: both;
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
}
#content_inside {
list-style: none;
}
#div_content img {
margin-left: 6px;
}
#inlinetext {
width: 290px;
height: 367px;
font-size: 13px;
line-height: 17px;
padding: 30px;
white-space: normal;
}

Thanks in advance for your help.

Regards,
Nick

**Paul O'B** · Aug 19, 2012 03:21

Hi, Welcome to Sitepoint

The white space:no-wrap only applies to inline elements within the block and not floated elements. that means the floats will just wrap when there is no room for them on the same line.

If you use inline-block instead then the whiite-space will stop the wrapping.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
	margin: 0px;
	padding: 0px;
/* remove float from here*/
	display:inline-block;
	vertical-align:top;
}
* html ul{display:inline}/* ie6 inline-block fix */
*+html ul{display:inline}/* ie7 inline-block fix */
li {
	list-style-type: none;
	display: inline;
}
#div_content {
	width: 100%;
	height: 427px;
	clear: both;
	white-space: nowrap;
	overflow: scroll;
	overflow-y: hidden;
}
#content_inside { list-style: none; }
#div_content img { margin-left: 6px; }
#inlinetext {
	width: 290px;
	height: 367px;
	font-size: 13px;
	line-height: 17px;
	padding: 30px;
/* remove white-space:normal from here */
}
#inlinetext li{	white-space: normal;}

</style>
</head>

<body>
<div id="div_content" class="flexcroll">
		<ul id="content_inside">
				<li><a href="images/taffin_lg.gif" rel="shadowbox"><img src="images/taffin_thumb.gif" alt="Taffin" width="301" height="400" /></a></li>
				<li><img src="images/evoident.png" id="ident" alt="The Evolution of Identity" width="472" height="400" /></li>
		</ul>
		<ul id="inlinetext">
				<li>“Tsunami”<br />
						First Wave - c. 2002<br />
						<br />
						I always assumed that if you had a logo, it meant you’d made it. So, when I first started playing around with graphics, I made my own. At the time I was faintly obsessed (I still am, if I’m honest) with Eastern pop-culture, so named my theoretical company "Tsunami" and used the Japanese katakana character <em>pi</em> (<em>hi</em> with a <em>handakuten</em> diacritic) in white on a coloured circular ground for a logo...coz it looks like a “t”, see? Even at this stage I had the idea of using different colours for different applications: blue for use on materials, pink for the website, green for printed promo stuff. None of these myriad scenarios ever came to anything, though.</li>
		</ul>
		<ul id="content_inside">
				<li><a href="images/timewolf_lg.gif" rel="shadowbox"><img src="images/timewolf_thumb.gif" alt="Time of the Wolf" width="300" height="400" /></a></li>
				<li><a href="images/child_lg.gif" rel="shadowbox"><img src="images/child_thumb.gif" alt="The Child" width="300" height="400" /></a></li>
		</ul>
</div>
</body>
</html>

You can do similar with floats but you need to use a large negative right margin on the floated container to allow the element to stretch into infinity.

**LittleIck** · Aug 19, 2012 07:19

Thanks, Paul!

That's solved both the wrapping and the overflow issues with all my benchmarks; the only problem now is that fleXcroll (the js custom scrollbar plugin I'm using) isn't playing ball and now disables the scrollbars altogether. I've temporarily removed the "flexcroll" class from the div in question until I can contact the author for some input.

Thanks again for all your help,
Nick

**Paul O'B** · Aug 19, 2012 08:11

Sounds like a conflict with the way your script works but to debug any further we'd need to see the whole thing.

You can do it with floats but need the negative margin technique I mentioned earlier.

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container:after {/* for opera */
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;
}
ul {
	list-style:none;
	margin:0;
	padding:0
}
#container {
	width:300px;
	overflow-x:auto;
	overflow-y:hidden;
}
#container ul {
	float:left;
	margin-right:-32767px;/* browser limit */
}
img { border:0; }
#container li {
	float:left;
	margin:0 1px 0 0
}
#container li span {
	display:block;
	padding:2px 0 10px;
	text-align:center;
}
</style>
</head>
<body>
<div id="container">
		<ul>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><span>testing</span></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><span>testing</span></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><span>testing</span></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><span>testing</span></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><span>testing</span></li>
		</ul>
</div>
</body>
</html>

**LittleIck** · Aug 19, 2012 08:46

I've given this method a whirl, and it works almost to the point of complete success. It plays nice with the JavaScript in Firefox and IE, although with this method IE7 now thinks the div contains more vertical information off the bottom that is not visible and pops in a vertical scrollbar as well (this may be due to a conflict in my code, which I'll try to dig out in due course). I've sent an email to the author of fleXcroll, so it'll be interesting to hear what he thinks about the conflict (and to see which method is the most effective for resolving this problem).

**Paul O'B** · Aug 19, 2012 11:11

Yes in my example IE7 adds the horizontal scrolbar inside the layout and thus reduces the height so you just need to add a little extra height for IE7 only (or pad the bottom a bit more). The vertical scrollbar can be hidden with overflow-y:hidden as in my example above.

Hopefully you can salvage something from those methods

User Tag List

Thread: Trouble with a scrolling div containing text + images

Thread Tools

Display

Trouble with a scrolling div containing text + images

Bookmarks

Bookmarks

Posting Permissions