Horizontal list with no wrapping

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Nathan - 28 Feb 2006 01:07 GMT

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

Reply to this Message

Chris Beall - 28 Feb 2006 02:50 GMT

> I am trying to prevent a horizontal list from wrapping. Each list item
> is floated with "float: left".
[quoted text clipped - 10 lines]
>
> 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

Reply to this Message

Nathan - 28 Feb 2006 05:23 GMT

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.

You'll note I am using "overflow: hidden" in the mask div. So
essentially I would like the box of the <ol> to grow independently of
the width of the mask.

Thanks for your help!

Nathan

----------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Wrapping</title>
<style type="text/css">

.mask {
    overflow: hidden;
    width: 400px;
}

ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

ol.hack {
    width: 2000px;            /*this is an arbitrary large number
                            to keep the thumbnails from wrapping */
}

li {
    float: left;
    display: block;
    margin: 0 10px 0 0;
    height: 100px;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}
</style>
</head>

<body>
<p>This is the result I do <b>not</b> want:</p>
<div class="mask">
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ol>
</div>

<p>This is the result I want:</p>
<div class="mask">
    <ol class="hack">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ol>
</div>

<p><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>

</body>
</html>

Reply to this Message

Stephen Poley - 28 Feb 2006 16:43 GMT

>I've put up at page at
>
[quoted text clipped - 4 lines]
>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."

Signature

Stephen Poley

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

Reply to this Message

Nathan - 28 Feb 2006 19:13 GMT

Sorry - wrong link. Good link:

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

Nathan

Reply to this Message

Stephen Poley - 28 Feb 2006 20:01 GMT

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

Signature

Stephen Poley

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

Reply to this Message

Nathan - 28 Feb 2006 20:11 GMT

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

Reply to this Message

Jim Moe - 28 Feb 2006 17:31 GMT

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

Signature

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

Reply to this Message

Nathan - 28 Feb 2006 19:15 GMT

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2006

Horizontal list with no wrapping