Forums

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

Home Forums CSS Going nuts! Last button in my horizontal menu moves to the next line when re-sizing browser

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42612
    lanacaralee
    Member

    Hi everyone, just started learning HTML/CSS. (My background is database dev.)

    I made a horizontal menu but the last item which contains a button and image will move to the next line when re-sizing the window. I can’t seem to troubleshoot it myself after 2 days. I will be forever grateful to the person who can resolve this for me! :D

    Cheers,
    Lana

    http://cdpn.io/ovIyG

    #123961
    lanacaralee
    Member

    Tried that but it didn’t work. By the way, I meant to say zooming in/out – not resizing the window!

    #123965
    Paulie_D
    Member

    The simple fact is that because you are using pixels as widths on everything rather than percentages you will always encounter this problem.

    This is because a declared pixel is not really a screen pixel :http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

    Eventually the way the browser will run out of space trying to cram all the pixels you have declared into a set width and your floated items will drop down.

    Percentage widths will go a long way to resolving this problem…it’s not a complete fix but it will help.

    Finally, in my experience users just don’t zoom that much…if it’s not breaking until you get to 150% then I would say that you are fine.

    #124137
    lanacaralee
    Member

    @Paulie_D Thanks for the info on percentage widths versus pixels. I suspected as much but wasn’t sure how I could apply that to my coding.


    @ChrisP
    Thanks so much for the suggestion. I added the box-sizing: border-box and took off the width for the first and last child and made them all 11.11% width. Unfortunately, the last menu item now sits on the second line just underneath the first menu item. Any other ideas? Here’s the revised code:

    #124138
    lanacaralee
    Member

    @ChrisP Sorry I copied your code word for word so not necessary to show you the revisions. I did notice that when I got rid of the border-right on the #globalnav li’s it fixed the problem but I need the border for aesthetic purposes. Any other recommendations would be awesome!

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