Grow your CSS skills. Land your dream job.

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://50.28.34.226/~cjstestd/drupal-6.26/

    Thanks!

    # January 5, 2013 at 5:36 pm

    Hmmm… That’s a good one. Probably media queries. Say at a pre determined width put them up top

    # 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 5:58 pm

    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

    # 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;

    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.

    # January 5, 2013 at 6:22 pm

    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.

    # January 5, 2013 at 6:50 pm

    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;

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".