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:

enter image description here

Should they be like:

[       70%       ] || [   30%    ]

(But the whole bar would be more than 100%)


[      68,7%      ||  28,9%   ]

(so that the whole bar is 100%)


[      70%      ||] [  30%   ]

with the separator that takes a little space of one of the side?

  • They should be as mixed as the percentages allow... I dont really understand this question
    – Mervin
    Commented Sep 2, 2012 at 19:10

3 Answers 3


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%    ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.