Is it possible to have an element which increases width by fixed increments?

Question

It's kinda hard to explain what I want to achieve... what I want is a container element that:

• Sizes to it's contents
• But only by fixed increments - for example, 150px, 300px, 450px, etc.

So if the contents are 100px wide, the container will be 150px wide. If the contents grow to 170px, the container's size jumps to 300px. Etc. The container will never be, say, 200px wide. Either 150px or 300px - whichever is the smallest that fits the contents.

Is this possible with pure HTML/CSS, or does this necessitate Javascript?

Answer 1

Short answer: it won't work with CSS only.

A little explanation + workaraound

The design of media queries were not made for specific elements, but either the viewport or the screen size of the device itself. Therefore media queries simply don't know the size of a specific element.

To achieve this effect you have to go beyond pure CSS and use some JavaScript. A very useful tool for this is https://github.com/marcj/css-element-queries, which is a polyfill adding for media queries based on elements. It's also rather cross-browser friendly (works on IE8+).

Answer 2

Not possible with CSS alone, but could work out a solution using JavaScript. :D