By mixed percentage bars, I mean something like the "likes bar" in youtube, with a left percentage bar, a right percentage bar, and maybe a separator:
Should they be like:
[ 70% ] || [ 30% ]
(But the whole bar would be more than 100%)
or:
[ 68,7% || 28,9% ]
(so that the whole bar is 100%)
or:
[ 70% ||] [ 30% ]
with the separator that takes a little space of one of the side?
It doesn't really matter. People can't tell 1-pixel distances easily.
If it's just 2 elements, then add the divider to the length.
If it's more than 2, don't use a divider and make sure you use colors that don't mix.
The CENTER of the separator should be calculated to be in the exact ratio position, rounded to the nearest pixel.
You can easily tell the centerline of a thick line from its width, and the center of something, most will agree, is where something "actually is", specially in this case where a thick line is just a concrete visual implementation of an imaginary line with no thickness separating two rectangles.
I agree with Aadaam that a small number of pixels will not be noticed, so any of the options would be fine as long as the separator is narrow (say, 1-5 pixels).
That said, the important thing to keep in mind is that you're trying to represent a ratio, so you want the ratio of the red and green sections to be close to the actual ratio (70:30). Therefore, I would actually go with your first option (which allows the overall length to be longer than 100%):
[ 70% ] || [ 30% ]
