5

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?

Vilx-
  • 104,512
  • 87
  • 279
  • 422
  • 1
    While javascript solution seems straight-forward, I'm quite looking forward for some insane CSS-only hack. – Tomáš Zato May 19 '14 at 23:01
  • 2
    In other words, it seems that you wanna bind a media query to a specific container, not to the entire viewport. – falsarella May 19 '14 at 23:04
  • http://stackoverflow.com/questions/12251750/can-media-queries-resize-based-on-a-div-element-instead-of-the-screen – The Alpha May 19 '14 at 23:04
  • 1
    This is definitely not possible with CSS only. – animuson May 19 '14 at 23:05
  • 1
    Also check [ElementQuery](https://github.com/tysonmatanich/elementQuery). – The Alpha May 19 '14 at 23:06
  • Media query to container - an interesting idea, hadn't thought about that. Well, but it's not possible anyway. :) ElementQuery seems nice, although that's already in the realm of Javascript (but it's cool, yes) – Vilx- May 19 '14 at 23:08
  • OK, if anyone makes a "You can't do this with CSS" answer, I'll mark it accepted. First come, first serve. :) – Vilx- May 19 '14 at 23:09

2 Answers2

1

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

Andrew
  • 18,680
  • 13
  • 103
  • 118
  • This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Bryan P May 20 '14 at 00:27
  • Yes, it answers the question "Is this possible with pure HTML/CSS, or does this necessitate Javascript?" – Andrew May 20 '14 at 00:27
  • This is not an answer, you should just comment this on the OP's question. – Bryan P May 20 '14 at 00:29
  • It is an answer. If he needs help creating a JavaScript solution can post a new question. – Andrew May 20 '14 at 00:31
  • @Bryan I disagree, it answers the question in its entirety. I suppose he could go ahead and show how to do it in JavaScript, but that was not asked for. – arserbin3 May 20 '14 at 00:32
  • 2
    Then what proof do you have to prove that this is not possible? You should always provide proof on this kind of answer, if you don't have, then isn't it opinionated? Thus this sort of answer is better off being just a comment, if you will check the comments, you will see this answer there, and by a moderator even. – Bryan P May 20 '14 at 00:37
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+).

display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
  • I'll accept this for now, because the consensus seems to be that "you can't do it with CSS alone". Although media queries aren't the only tools in the CSS toolbox. Are you sure that there's nothing else? – Vilx- May 20 '14 at 06:22
  • @Vilx- I have to admit I don't know about any solution with only CSS, so I don't know what to write more about it in my answer. – display-name-is-missing May 20 '14 at 23:36