CSS 100% width with steps per 20px

Question

Is it possible in pure css to set some steps with width changing?

Lets say I've got div 100% width, so when container is 30px it will be 30px wide to. But is it possible to set some 'jump' to 20px so when container is 30px, it will be still 20px, but when container is 40px, it will get then 40px as 40 is multiple of 20?

In other words - force some element's width to be limited to multiple of some integer.

Answer 1

I've done it in JS, but I've mixed it with some css solution:

$.fn.widthStep = function(step)
{
    var width = $(this).width();
    $(this).css('max-width', width - width%step);
}

It sets max-width css prop to maximum possible width that is multiply of 'step' and is <= actual width.