Wrap elements to top instead of under

[Dhaupin]

I am developing a fluid width site that features a navbar of li elements themed as tabs. As I collapse browser width, tabs act as expected – just like word wrap.

My issue is that I would like the tabs to display on top instead of underneath (as browser width decreases). Does css have this ability? It’s always annoyed me.

Currently tabs are controlled via float left instead of inline. Inline is too margin inconsistent. I’d prefer to use float.

Here’s the test site so you can see what I mean: http://50.28.34.226/~cjstestd/drupal-6.26/

Thanks!

[Dhaupin]

Hmm yeah im thinking it’s gonna have to be scripted up. it’d be like and element gravity tag if it existed. Its just dumb, ive waited literally 6 years for a css solution hah. I tried all kinds of tags, neg margins, whitespace, clears, floats, baseline shift, line heights, positions, all gave nothing :)

[Dhaupin]

Consider all the tabs/inline menus out there, combine with fluid width era, use for squishing down data in reverse gravity…. and we see why such a tag would be GREAT news

[Andy Howells]

Why not just have a hidden version of the nav for mobile and use display:none;/visibility: hidden;

Alternatively, if you don’t want to code it into the HTML you could use Javascript to append the nav to an alternative element, I.E reordering it in the flow of the document.

[Dhaupin]

Yes true, that’s how I usually do it, but I want something that works across all inlines this time. Its not just for navbar. Consider a tabber box (desc, specs, warranty) on a products page. Or tab buttons across the top of a user account page. Or list of product categories arranged in a mini nav. Actually, any horizontal list at all would use it.

[Dhaupin]

Hmm I guess if it were a perfect CSS world, they’d do reverse wrap order too – ie while collapsing, the first element gets wrapped instead of last element. Think RTL languages, everything gets swapped except nav tab wraps :)

white-space: left-wrap;

[Author]

Posts