UL in DIV

[cdmn]

Hi there,

legs say i have such css:

<div style="overflow: auto">
<ul style="list-style: none">
<li style="float: left">a</li>
<li style="float: left">b</li>
<li style="float: left">c</li>
<li style="float: left">d</li>
</ul>
</div>

..and you guessed right, im trying to display tabular data with UL/LI. My problem is this that, if UL/LI gets bigger (in width) than its container (div) the last LI gets dropped to the next line... And what im trying to achieve is to get horizontal scroll (overflow: auto).

What im doing wrong? :-)

[Setek]

Hi cdmn!

Are you actually trying to display tabular data? As in, data that logically belongs in a table?

You should use a table...

It's semantic and logical for tabular data to be in a table. Tables aren't evil, it's just the misuse of them.

[cdmn]

Yeah i know that...

But. This data will have some javascript effects like: column being resizable, some hover effect etc. And doing those effecs with public (free) javascript frameworks like mootools or prototype is much easyer having content div'ed :-)

So i really must figure this out...

Thanks for your reply! :-)

[Setek]

Oh sure thing, web app eh...

Hmm...

That's what floats are meant to do, so I can only think of a couple of things that -possibly- might work, you'll have to try and let us know whether it did or not:

1. overflow
Setting the container that holds the floats to

overflow-x: auto;

(this only works in Firefox/IE 6 + 7, i.e. not Opera or Safari 2.0.4 I believe) but that might stop it from wrapping once it hits a line.

2. set width
Force the width to something bigger: I suppose if these columns need to be resized... the set width will have to change accordingly.

width: 100%;

I doubt will work, but you can always try (I believe that'll make it 100% of the parent container, or 100% of viewport width, whichever comes first.)

That's all I could think of: besides not floating them and only making them display inline... but that means you can't set a width, which will probably stop it from looking like a column at all won't it...

:)

[Xapti]

I still think it will be easier for you to do the javascript with tables (what's the problem?), but I don't know a whole lot about that.

The good thing about using tables is that even if the creator didn't put in javascript for stuff like sorting or resizing, a person with a standard extension designed for table customizations would be able to do it themselves. Such extensions are not made for other (non-semantic) types of tabular data display, Because it doesn't know how to sort, it sees no order in a bunch of lists; there's no official columns or cells or such.
Tables can also be easily exported to spreadsheet editors or word processors as far as I know, too, which is perhaps a better reason (since if a person wanted to sort a table, it's much more likely they'd paste it into something Openoffice Math or Microsoft Excel, since most people haven't heard of such browser extensions, and most don't even use browsers which would have such extensions (Firefox has, but I don't know about any others)