It is generally a good idea to specify the width of the navigation links. This helps ensure that the block link does indeed take up the entire space within the containing DIV but does not overflow it. Some browsers might not display the links as wide as they should be if width is not specified. And other browsers will automatically resize the containing DIV to fit around link text that is too long potentially disrupting the rest of the page design.

Remember that the total width of an element box is made up of content width + padding + borders + margins.

In this tutorial we first removed all margins and padding from the unordered list which contains the navigation links. We then set the left/right padding for the links to 0.5em. There are no left/right borders on the links. The containing block for the navigation buttons is the sidebar DIV to which we applied a width of 6em. This is the width we must consider when adding the width property to our links.

Currently the links have a total of 1em of left/right link padding, which means that the link width property should be set to a maximum of 5em. A width larger than 5em will cause the links to exceed the width of the sidebar DIV.

div#sidebar a { display: block; text-decoration: none; background: #fc3; color: #333; padding: .2em .5em; border-bottom: 1px solid #f60; width: 5em; }

Your navigation menu should still look like the example below-left.

The example below-right shows what happens if the width of the links exceeds the width of the containing DIV. The links overflow the green border of the sidebar DIV.

example at this point.
Note: We are using EMs–a relative unit of measure–for the sidebar DIV width as well as the link padding and width measurements which means that all the components of our navigation menu will resize in tandem if a user increases the browser's font size.

Next we will add a pseudo-class to our style sheet to change the color of the links (menu items) when the mouse rolls over them.