Width in percent-border

Question

Lets say I wanted to make a horizontal nav bar, with five links, and I set the width to 20%. As soon as I add a 1px border to my links, they become bigger than 20% and the last link is moved onto a new line! How can I get around this problem?

I was hoping CSS would allow me to do a negative padding value so that the border would actually be over the element rather than around it, but it doesn't allow for that.

Answer 1

If you need IE6/7 to play along you will either need the extra internal element or you could try negative margins. My recommendation is to use a list for your nav, and add the borders to the links themselves, as such:

<ul id="nav">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

That is unquestionably (update: used to be. in HTML5 you can now use the nav element around the list) the most semantic markup for navigation. Then your CSS is simply:

#nav li {
  float: left;
  width: 20%;
}

#nav li a {
  display: block;
  border: 1px solid #000;
}

OR: for extra fun you can try the CSS3 box-sizing declaration instead, available now in all modern browsers (not IE6/7) with some help:

#nav li {
  /* Opera 8.5+ and CSS3 */
  box-sizing: border-box;
  /* Firefox 1+ */
  -moz-box-sizing: border-box;
  /* IE8 */
  -ms-box-sizing: border-box;
  /* Safari 3+ */
  -webkit-box-sizing: border-box;

Answer 2

nope, the box model add's the border to the total, so I wouldn't mix them if it needs to add up a a specific width, in your case 100%, put a div (or some block element) inside your object that needs to be 20% and make it 100% with a border.