Help, cant use min and max width in multi-column layout

[yekta]

Hello,

With a few columns, I would like the first column to resizbale to a min and max width before any overflow of the parent container takes place.

Effectively to have a min-max width before the overflow-x of the columns container is overflowed.

I’ve generated a comprehensive minimalist example of what I’m referring to here: http://cssdesk.com/KKtBt

I’m trying to get .column-one to be minimum 425px and be able to grow until 600px if there’s room but it only does that once the column-two and column-three are gone. How might I get min & max width to apply with column-two and column-three present?
Thanks!

[yekta]

OK, a simpler version of what I’m trying to do.

Any help is greatly appreciated: http://codepen.io/anon/pen/zkjsc

[dfogge]

i think you’d need to use media queries.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

[yekta]

Sorry I’ve been staring at this problem too long, where would they logically be applied?

[wolfcry911]

the float has no defined width – only min and max. It therefore will shrink, or stretch, to fit the content. The content here is as wide as available (the p) and will be set to 600px – it will not shrink below that because of the content and lack of width.

Your comment in the pen states you can’t use width: 35%; – why not? it works…

[yekta]

Thanks for the explanation: I can’t use a % width because I will never know the exact width it should be. You see, I will have a dynamic number of columns in there, not just 2 or 3. Setting it to 35% width would have an inconsistent behavior about it, in my case. So since there will be multiple columns, at any given time — I need for the first column to be bigger if it can be or smaller if it has to, 600 and 425 respectively.

[yekta]

I may just have to do this with JS, though I was really hoping there’s a CSS way to do it.

[wolfcry911]

There may be a CSS solution, but I don’t fully understand what you’re trying to do. How many columns max may there be? I’ll assume 3 for the moment… When there are three and room allows, column 1 will be 600px and col 2 and 3 will be a fixed width. When the viewport shrinks, what happens first? Does col 1 shrink to 425px? or does col 3 drop from view? In either case, when col 3 does drop, what then happens to col 1? Etc…

[yekta]

Per the above description: when the viewport shrinks, what I need to happen first (before any column is dropped) is for the column-one to shrink, but only until 415px width.

(In real life) There will be as many columns as can fit on the screen (hence no % widths), the resize-able column needs to shrink or grow depending on whether or not room allows and actually, regardless of it’s column index position.

If this were achievable in CSS, it would absolve me of having to manually edit the DOM and css classes with JS, what CSS is much more efficient at doing.

[wolfcry911]

You haven’t thought this through…
Let’s say there are three columns, col 2 and 3 are fixed width at 300px each. At viewport width greater or equal to 1200px col 1 is 600px and 2 and 3 fit without trouble (I’m assuming greater than 1200 there’s equal margin on each side, or perhaps just on one side – you haven’t covered that). Now the viewport shrinks below 1200 and col 1 begins to shrink while 2 and 3 are still 300px and still fit – no problem. At 1075px width col 1 has reached it’s min width col 2 and 3 are still fine. But at 1074px there’s no longer enough room for min col 1 and 2 300px col. So what happens? Col 3 drops – fine, where does col 2 go? You have more viewport width than combined col width, but not enough for 3 columns. Even if col 1 stretches to its max width of 600px you still have an extra 174px width unaccounted for…

[yekta]

The columns need to always be centered with equal margin on both sides, sorry I didn’t make that clear.

When the viewport is less than 1200px, col 1 isn’t shrinking while 2 and 3 are still 300 and still fit. That is the problem.

At 1074, assuming col 3 is dropped, the viewport width can fit col1 and col2 just fine and col1 would be able to be 600 again, they would both be centered and life goes on.

Does that all make sense?

[wolfcry911]

Yes, makes sense now – thanks. Working on it…
Can the source order of the columns be changed or not?
Are all the columns after 1 the same fixed width?

[yekta]

Not all the columns are actually going to be 300px. Aside from the min-max ‘column-one’ we’ve been discussing, some columns may be also be static 425px wide.

If by source-order you mean will column-one always start at col index 0, then no, it may be anywhere at any time.

[wolfcry911]

By source order I meant the order it appears in the html. But it doesn’t matter now, with those last two bits of information, you’ve made it near impossible with just CSS.

[yekta]

Yeah, that’s what I was afraid of, really appreciate you thinking through this!

Guess I’ll keep track of things in JS then,
Thank you very much.

[Author]

Posts