Home › Forums › CSS › Going nuts! Last button in my horizontal menu moves to the next line when re-sizing browser
- This topic is empty.
-
AuthorPosts
-
February 9, 2013 at 11:01 pm #42612lanacaraleeMember
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,
LanaFebruary 10, 2013 at 2:57 am #123961lanacaraleeMemberTried 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 #123965Paulie_DMemberThe 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 11, 2013 at 9:21 pm #124137lanacaraleeMember@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 #124138lanacaraleeMember@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!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.