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.

Answer 1

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!

Answer 2

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/