Horizontal list with no wrapping

I am trying to prevent a horizontal list from wrapping. Each list item
is floated with "float: left".

Currently I use an ugly hack. I set the width of the list to a large
number which is guananteed greater than the total width of all items.

Is there a way to accomplish this without my hack? It would be handy
because I would like to read the total width of all items in
javascript. I looked into white-space: nowrap, but it doesn't work on
floats obviously. I also do not want to use tables.

Any help would be greatly appreciated,

Nathan

Nathan wrote:

I am trying to prevent a horizontal list from wrapping. Each list item
is floated with "float: left".

Currently I use an ugly hack. I set the width of the list to a large
number which is guananteed greater than the total width of all items.

Is there a way to accomplish this without my hack? It would be handy
because I would like to read the total width of all items in
javascript. I looked into white-space: nowrap, but it doesn't work on
floats obviously. I also do not want to use tables.

Any help would be greatly appreciated,

Nathan

Nathan,

The use of float: left pretty much guarantees that the items will wrap,
so you could remove that to start. But if the list is inline text it
will wrap anyway.

The best way to present a problem like this is to upload the HTML and
CSS to a server somewhere an give us the URL. That way we can see ALL
that you are doing (including stuff you might have considered to be
irrelevant), and can copy and modify your work to try various solutions.

It also helps to know WHY you want to do what you want. In this case, I
have no idea why you would want to 'read the total width of all items in
javascript'. If we knew why you want to do that, we might be able to
come up with a more elegant solution (especially given that JavaScript
works only when the user has enabled it).

Chris Beall

On 27 Feb 2006 21:23:59 -0800, "Nathan" <nathan.funk (AT) gmail (DOT) com> wrote:

I've put up at page at

http://nathanfunk.dyndns.org/pland/wrapping/

demonstrating the undesired wrapping as well as the desired result
(code attached to this post). The desired result is accomplished by
specifying a large width "width: 2000px;" which is not an elegant way
of solving the problem.

"Not Found. The requested URL /pland/wrapping/ was not found on this
server."

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Nathan wrote:

I've put up at page at

http://nathanfunk.dyndns.org/pland/wrapping/

You mean <http://nathanfunk.dyndns.org/pland/horiz-list/>?

You can use a percentage width for #navcontainer as well. Then it
adjusts with the viewport.
But why do you need to know the width of the unclipped menu?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Sorry - wrong link. Good link:

http://nathanfunk.dyndns.org/personal/wrapping

Nathan

I am scrolling the menu left and right by changing the relative
position of the list. In order to know where to stop the scrolling, I
need to know total width of the items.

Nathan

On 28 Feb 2006 11:13:33 -0800, "Nathan" <nathan.funk (AT) gmail (DOT) com> wrote:

Sorry - wrong link. Good link:

http://nathanfunk.dyndns.org/personal/wrapping

Nathan

Well, I see from your answer to Jim that this is for a menu. Speaking as
a user I would much prefer a menu that wraps so that I can see what the
available options are without having to scroll backwards and forwards.
Why do you think that your visitors want to scroll?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

I am writing the code on a contract basis and am not making many
decision about functionality myself.

So the question remains whether there is an elegant way of preventing
the list from wrapping. From the responses so far I conclude there is
probably not.

Waiting for CSS4...

Nathan