Dynamic width

[sheepysheep60]

In CSS is there a way to keep width always wide enough to keep its child elements?

I’m making a horizontal scroller, I would like something like this (the boxes are all kept in another div, not referenced. Then I’ll set the parent div to overflow-x: scroll

|--- container ---|

|- box -||- box -|



|

container

|

|- box -||- box -||- box -||- box -|

I don’t want this to happen:

|--- container ---|

|- box -||- box -|

|- box -||- box -|

Any ideas? Before anyone says it, I can’t set the area the boxes are in to a fixed width as its dynamic. Before anyone says, I can do it with jQuery, just want to be able to keep as much of this css based as possible.

Thanks

[TheDoc]

You’ll need to use something like this:

http://codepen.io/ggilmore/pen/3/1

[sheepysheep60]

Yep, obviously – but its dynamic – i.e. the number of box elements may go up or down depending on what gets put in the CMS by a client.

[TheDoc]

Yup, and you can calculate that width via JS.

Either that or you can set the inner wrap to be a max, and then tell the client that they have a maximum number of slides that they can have.

[sheepysheep60]

So to backtrack,

“In CSS is there a way to keep width always wide enough to keep its child elements?”

We’re going with ‘no, there is not.’?

[TheDoc]

Sorry, I missed that little caveat. I’m going to go with a ‘no’ – but maybe somebody else can chime in.

[Jeager]

http://codepen.io/pen/10679/7

I feel like this is what you are going for. All CSS dynamic

Edit: Perhaps I should explain it a little. The width is set to 90% of the parent (presumably the body), this allows the width to remain fluid. The overflow-y: hidden; allows the margin of the slide to hide all the sliders that cannot fit into the current width of the box. The slides having a float:left; allow all slides to be in-line, which would also work.

[TheDoc]

@Jeager – I don’t think that’s a suitable solution. Think of navigating between the slides…

[TheDoc]

@kgscott284 – an excellent display of what we’ll be able to do with CSS! A no-go for current browser support, though.

[Jeager]

Hmm… I feel like there should be a way to put all the boxes in a line, having an overflow-x to scroll, and force the box to scroll? or is that only doable on a fixed width? Dwell on this I will.

Edit: Just making sure it worked how I knew it would here: http://codepen.io/pen/10679/9 vertically. Does the non-fixed width then change the box to not act like it does in this last example? Actually now that I tried it with a fixed width, it does not allow for a horizontal scroll either. And oops. Just caught that you were talking about my ID’s, totally just wasn’t thinking ;)

[Jeager]

Pretty sure I just got it: http://codepen.io/pen/10679/15

and when you want to put a paragraph in it, it apparently has to be floated: http://codepen.io/pen/10679/18

Edit: Forgot to make it dynamic, but it still does work with the change.

[sheepysheep60]

Wo, awesome – thanks for the responses. Think I will have to go for just some jQuery and go back to basics, but really impressed, especially with @kgscott284, nailed it completely. Maybe not possible yet, especially for my ancient audience, but really interesting to see. Thanks.

[Jeager]

Guess I am slightly confused. The link above does the exact same thing you described and works in all browsers. Did I miss something?

[joshuanhibbert]

@Jeager As far as I can tell, your solution is fine. Only thing I would add: no need to float the paragraphs, simply add vertical-align: top; to .slide. That way you are directly dealing with the issue, rather than introducing a ‘hack’. The default value for vertical-align is baseline, which is why introducing a paragraph causes such a visible shift.

[sheepysheep60]

@Jeager hey buddy – sorry, you aren’t confused, I am. You nailed it as well – its exactly what I was after – thanks so much! And so, so sorry for overlooking it in my initial response.

Your whole example is awesome, but the white-space:nowrap; is the thing I was after. I’ve never had to use something like it before, didn’t even know it existed!

Sorry it took so long before I replied, I tend to just get a problem, ask a question, fix it with something as fast as possible then forget a little about the forum! Thanks again.

@joshuanhibbert good call as well! Pro.

[Author]

Posts