Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS floating divs, side-by-side, unknown widths

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #234924
    grimski
    Participant

    I’m using a priority navigation, so when there isn’t enough horizontal space available links are moved into a dropdown at the end of the menu. It’s made a bit more complicated as I have a title inline with the navigation, which effects the available space calculation due to the additional width outside the navigation. This will be reused with different titles, so I can’t set a pixel width on the element.

    I actually have the layout working, at a glance. You can see this in the following CodePen:

    http://codepen.io/moy/pen/ZbjbNM

    When you resize the viewport items are hidden and moved into a ‘more’ link at the end of the list. The problem is I’ve had to use overflow: hidden; on the div that follows the title to get it to line up and no wrap. The problem is the last list-item is a dropdown – so on hover, the menu is cut off.

    Can anyone think of an alternative for this effect? I tried applying the classic clearfix but that didn’t work, I think the items wrapped or the div moved down below the title.

    I thought I’d managed to fix this using javascript to get the width of the title and subtract it from the available space. The issue with that was on small screen widths, the title is moved above the list so the title isn’t a factor anymore. For some reason this sum seemed to leave the browser hanging, it would take ages to load.

    This is actually a continuation from a thread I posted in the “JavaScript Jungle” forum. For reference:

    https://css-tricks.com/forums/topic/responsive-navigation-hide-move-itemss-to-dropdown-when-space-runs-out

    Hope someone can help, it’s a bit of a complicated one to explain!

    #234926
    Atelierbram
    Participant

    Could this maybe work with using all floats, ISO overflow? Like my fork of your demo:

    http://codepen.io/atelierbram/pen/vNbxww

    Very well formulated question BTW.

    #234928
    grimski
    Participant

    Thanks for that. Unfortunately when the browser is resized, smaller, the list drops underneath the title rather than staying side-by-side with it and they need to stay next to each other.

    #234930
    Atelierbram
    Participant

    Yes because of the min-width on the title, to work around this you could use a more adaptive approach with fixed width’s for the floats ISO percentages. But this would mean a lot of breakpoints for every time the design breaks, and thus a lot of extra code in media-queries. Having said this; if this design is important to you, than doing it like that instead may be the best approach in this case, but please someone prove me wrong.

    #235022
    Atelierbram
    Participant

    Have you looked at other variants of this kind of navigation, like this one?

    #235697
    grimski
    Participant

    I settled on just using a fixed width for the title area, not ideal but it turns out the title was the same on all pages. So I can just about get away with it on this website – maybe not the next!

    I really liked that approach @Atelierbram and I think I’ll try out this version on a future project. The only issue I can see is I think it used flexbox so it would be interesting to see what the fallback as for browsers that don’t support that.

    Thanks for all your feedback and suggestions :)

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.