Grow your CSS skills. Land your dream job.

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

  • # February 9, 2013 at 11:01 pm

    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

    # February 10, 2013 at 12:49 am

    You could set a min-width.

    # February 10, 2013 at 2:57 am

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

    # February 10, 2013 at 4:10 am

    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.

    # February 10, 2013 at 4:15 am

    @lanacaralee, it’s the border on the `li`’s, [here’s the fork](http://cdpn.io/DqEIg “”)..I gave the `li`’s a box-sizing: border-box (incorporates padding and border into the width of the element); then took off the width for first and last child, and made them all 11.11% width.

    # February 11, 2013 at 9:21 pm

    @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:

    # February 11, 2013 at 9:22 pm

    @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!

    # February 11, 2013 at 9:34 pm

    @lanacaralee, normally, I’ll add

    * {
    box-sizing: border-box;
    }

    so everything takes on the border-box..you’ll have to add the vendor prefix’s though.

    Will that fix your problem? I didn’t notice a right border in the `#globalNav`

    # February 12, 2013 at 12:47 pm

    @lanacaralee, I’m sorry I must have misunderstood your comment last night, if you add the box-sizing: border-box; to the li’s there’s no need to remove the right border, as the 1px border is included in the 11.11% width of the li’s..the _only_ thing that doesn’t look aesthetically pleasing would be the white border that #globalNav will have at the end when you zoom out since 11.11% * 9 = 99.99%

    You could remedy this by making the li’s 11%, then make either the first or last li 12% so it will equal 100%, or, alternatively, give the `#globalNav` the same background color as the li’s so it blends seemlessly

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

You must be logged in to reply to this topic.

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