[thelist] preventing navbar element wrapping

Julian Rickards julian.rickards at gmail.com
Mon Nov 13 17:18:45 CST 2006

Not exactly the answer you are probably looking for but here goes.

You have tried the two properties I would have recommended, however, I am
not convinced that your approach is correct.

If the browser window is too small (or made smaller) and if either CSS
properties worked, then one or more of the buttons would be inaccessible.
Consider a cell phone or PDA screen: you wouldn't want many (most?) of your
buttons to be out of reach of the user.

Design for a reasonable screen width (800 or 1024) and don't worry about
what happens if someone with a smaller screen views the page: it may result
in an appearance that you really didn't want but at least the page is still



On 13/11/06, John DeStefano <john.destefano at gmail.com> wrote:
> What CSS style property would one apply to a horizontal
> list/navigation bar to prevent its elements (i.e., "buttons") from
> collapsing below each other as a browser window decreases in size?
> The width is currently set at 100% to apply a horizontal stripe across
> the page to the right of the last button element.  The display is fine
> at any width around 800px or above; as the browser narrows from there,
> the navigation bar begins to degrade and the "buttons" begin to drop
> beneath each other, starting to the one at the farthest right.  I'd
> like the bar to remain intact, and for the page to scroll if necessary
> instead of degrading the bar.
> I've tried applying "white-space: nowrap;" and "overflow: scroll;" to
> the navigation bar container with no effect; adding "scroll" to a
> top-level container just made unnecessary scroll bars appear.
> Thank you,
> ~John
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

Website: http://jrickards.ca
Blog: http://pen-and-ink.ca

More information about the thelist mailing list