change of font-weight to bold is unwantingly changing width of element [duplicate]

Answer 1

No. It will change the size of the parent div.

I would like to quote Quentin's answer.

The font is a proportional font, so it gets thicker (and takes up more horizontal space) when it is made bold.

Find more information here.

Answer 2

If you put the width attribute in your .navItem class, then the width wouldn't be changed on hovering.

.navItem {
    display: block;
    float: left;
    position: relative;
    **width:70px;**  // this
}

I have udpated the fiddle. Please check.

Answer 3

As you are not specifying any width for the elements, they are sized according to their content. As such, when the font-weight is normal, the element takes up less space than when it is bold. As the content changes size, the size of the box also changes.

You can specify the width of the element so that it slightly bigger than it's content or alternatively use a different method for identifying the currently active tab.