Floated elements with %-based width and px-based borders: What is the best way to avoid the line break?

Question

I have an issue that terrorizes me in my sleep, unrelentingly . If you have an attainable solution and care to share it, please do; I'd like to have a normal night of sleep again.

On my latest project, there are multiple times when I will need to have 4 or 5 elements floated next to one another. Each element must be sized using percentages (%) but must also have border-right: 1px solid #000.

Once upon a time, I would normally size each element with percentages, then create a child element that would have all of the styling properties that the parent probably should have had, including the border-right. This solution isn't ideal, however, because it involves a lot of unnecessary markup.

A co-worker then directed me to another solution. When an element has a width that is sized using %s, and also needs to have border-right: 1px solid #000, apply margin-right: -1px as an offset. And while it works, it created another issue for me (which is why we're here, together, in union).

When zooming out in any of the major browsers (ctrl mousescroll, ctrl -), the floated elements that have been the focus-of-discussion tend to dance around a bit; the last element toggles between breaking to the next line and then snapping back. Please refer to the image below:

The reason this should be addressed is because the scope of the project has the potential of serving people from many different demographics (especially those who may need to scroll in, or out for that matter, to make the text larger or smaller). A very broad project, indeed.

How can I reach my goal highlighted in the example above? How can I have 4 or 5 or more (or less) bordered elements floated next to one another, sized proportionally using %s, WITHOUT them breaking form?

Answer 1

You can use the experimental box model CSS3 declaration to have the borders detract from the elements width instead of adding on to it. This should prevent the problem. Quirksmode has a nice write up on it. It is supported by IE8/9 and current versions of webkit, opera and ff.

li {
   -webkit-box-sizing:  border-box;
   -moz-box-sizing:  border-box;
   box-sizing:  border-box;
}