Wrap elements to top instead of under
# January 5, 2013 at 4:17 pm
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://18.104.22.168/~cjstestd/drupal-6.26/
Thanks!# January 5, 2013 at 5:56 pm
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 :)# January 5, 2013 at 6:02 pm
Why not just have a hidden version of the nav for mobile and use display:none;/visibility: hidden;
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.
You must be logged in to reply to this topic.