[thelist] preventing navbar element wrapping

ben morrison morrison.ben at gmail.com
Tue Nov 14 08:57:01 CST 2006


On 11/13/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?
>

Setup a minimum width?

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

This is often the problem with full-screen designs or fluid/elastic layouts.
Although this same problem will still exist when the user enalarges their fonts.

Its fair to say that this is in effect a problem with horizontal
navigation for small window sizes/large font settings. I wouldn't say
that the navigation "degrades" but in fact is built well to allow it
to work at smaller sizes/large fonts.

Personally, a scrollbar is much more annoying than the layout of the
buttons - You may find that the buttons hidden off the screen will not
get used for those users.

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

Look into the min-width properties[1], not supported in IE5 - IE6.

width:100%;
min-width:800px;

You could use an expression to get IE to play[3] with the other
browsers and use conditional comments to hide it from other IE
versions[3].

width:expression(document.body.clientWidth < 800? "800px": "auto" );

ben


[1] http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-min-width
[2] http://www.svendtofte.com/code/max_width_in_ie/
[3] http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp



More information about the thelist mailing list