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.
<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>
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.
<!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;[B]
/* remove float from here*/[/B]
[B] display:inline-block;[/B]
vertical-align:top;
}
[B]* html ul{display:inline}/* ie6 inline-block fix */
*+html ul{display:inline}/* ie7 inline-block fix */
li {[/B]
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;
[B]/* remove white-space:normal from here */[/B]
}
[B]#inlinetext li{ white-space: normal;}[/B]
</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.
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.
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).
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
