How do I add 1px border to a div whose width is a percentage?

Question

I have this jsfiddle http://jsfiddle.net/tara_irvine/DZLTJ/1/ which explains my problem.

I want the menu items along the top to be 20% of the window but I also want

Answer 1

For the border, you can use

outline: 1px solid black;

this works on all modern browsers, but not on IE6 and 7

Answer 2

For this you can use css box-sizing for this:

like this:

#nav_1232938 li, .row {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Answer 3

I just ran into a project where I had to do the same thing. Although box-sizing is probably the best answer, I decided to use generated :after elements (because of some issues specific to my project).

I set the li's (width + padding) x number of li's to equal 100%, then absolute positioned 12px width, 100% height li:after elements to top:0, right:-6px; of each li. Li:last-child was floated right so that it always lines up flush with the boxes beneath (browsers calculate fractional pixel remainders from percentages differently so sometimes you have a space on the far right of your floated elements, even if the elements' width adds up to 100%), and li:last-child:after was set to display:none.

Here's an edit of your js fiddle as an example: http://jsfiddle.net/DZLTJ/12/

Notes: In my page, the padding set in % would never be smaller than the :after element's width set in px, so the content box would never be obscured.

Box-sizing and :after are supported in all browsers post i.e. 7, but :last-child actually has less support, no i.e. 8. Like I said, box-sizing is probably a better choice, but in my case the absolutely positioned after element was a better fit -- thought it would be worth mentioning in case it was for anyone else too.