Trouble with a scrolling div containing text + images

[LittleIck]

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.

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



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

[LittleIck]

Moderate success! Instead of using inline-block on only the "inlinetext" class, I've applied it to all the ul tags in the div instead of "float: left", thusly:

ul {
margin: 0px;
padding: 0px;
display: inline-block;
vertical-align: top;
}
li {
list-style-type: none;
display: inline;
}
#div_content {
width: 100%;
height: 427px;
clear: both;
white-space: nowrap;
overflow: scroll;
}
#inlinetext {
width: 290px;
height: 367px;
font-size: 13px;
line-height: 17px;
padding: 30px;
}
#inlinetext li {
white-space: normal;
}

Both Firefox and IE seem to be happy with this (solving the scroll and wrap issues), but now are not taking kindly to fleXcroll, the scrollbar plugin. With the plugin applied, the scrollbars are disabled altogether. Looks like the battle's not quite over!