Forums

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.

ChrisxClash

I'm going to have to say the same. As far as I know there's no way to do this purely with CSS, unless you give it a ridiculous width, which I feel would be worse than just a short line of jQuery.

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...

ChrisxClash

@Jeager, I can only see 8 boxes, and it doesn't let me scroll anything. O:

kgscott284

Well, it isn't impossible!

How about something like this?

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

I also fixed your HTML since you used ID's for all the slides which is a no no!

TheDoc

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

kgscott284

Of course support is horrible...lol, just needed to throw it out there 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.

treehouse : what would you like to learn today?

Forums

Dynamic width