By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,934 Members | 1,449 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,934 IT Pros & Developers. It's quick & easy.

Horizontal list with no wrapping

P: n/a
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

Feb 28 '06 #1
Share this Question
Share on Google+
8 Replies


P: n/a
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

Feb 28 '06 #2

P: n/a
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>

Feb 28 '06 #3

P: n/a
On 27 Feb 2006 21:23:59 -0800, "Nathan" <na*********@gmail.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/
Feb 28 '06 #4

P: n/a
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)
Feb 28 '06 #5

P: n/a
Sorry - wrong link. Good link:

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

Nathan

Feb 28 '06 #6

P: n/a
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

Feb 28 '06 #7

P: n/a
On 28 Feb 2006 11:13:33 -0800, "Nathan" <na*********@gmail.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/
Feb 28 '06 #8

P: n/a
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

Feb 28 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.