CSS border effecting width when resizing browser

Question

I made two simple navigation menu using ul and li . One without border and another with border. The width of the both menu is fixed with 400px.

In ther first menu I gave each li a fixed width of 100px and in the second menu according the width calculation I gave fixed width of 98px and 1px border on left and right which in total is 100px for each li .

Now my question is when I am resizing the the browser resolution using the "Ctrl + -" the first menu stays as it is in any resolution but in the second menu the last element is shifting to the next line under the first element.

I want to know why this happens and how to resolve it. Thanks in advance.

Here is the JSFiddle Link : http://jsfiddle.net/jhz56/

Answer 1

The border width doesn't scale together with the li width, that's why the menu breaks. So one solution can simply be:

.nav2 ul li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/jhz56/1/

Answer 2

This issue is simple. You are saying you have set the width using px , which will also change once you are changing the screen size, so to minimize this error. I will recommend using % so that in every screen size, it should always have its own width and height

This way, it won't come out of its box. I have checked your fiddle, both of the lists were on their place no matter how much zooming.

Second thing that you can is to use Media Query to make sure that the with each screen size, the element gets a new style to fir perfectly to the screen size and the needs.

When you press Ctrl with + , the elements get a zoom and are more likely to take more pixels from the browser. Which makes it go a block downwards to fit to the width provided, when you press - the element shrinks and goes near to the left li . This way, their properties shift.

Here is a fiddle, http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/ When you try zooming in or out, the element will change its widths and all that other properties.

You can use min-width and max-width instead of width . To make sure, it always gets the total width as its min and max.

div {
  max-width: 500px;
  min-width: 500px;
  width: 500px; 
}

http://jsfiddle.net/afzaal_ahmad_zeeshan/7SbLR/1/ In this fiddle, slight zooming in and out won't cause an error in the UI, but it doesn't work for alot of zooming (250%+). So here media query will be the option.

This way, even if you zoom in or out, the element will always have a width of 500px . This might be handy for you!