Grow your CSS skills. Land your dream job.

Dynamic width

  • # July 11, 2012 at 1:19 pm

    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

    # July 11, 2012 at 1:23 pm

    You’ll need to use something like this:

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

    # July 11, 2012 at 1:24 pm

    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.

    # July 11, 2012 at 1:27 pm

    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.

    # July 11, 2012 at 1:32 pm

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

    # July 11, 2012 at 2:25 pm

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

    # July 11, 2012 at 4:25 pm

    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.

    # July 11, 2012 at 6:29 pm

    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.

    # July 11, 2012 at 7:12 pm

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

    # July 11, 2012 at 7:21 pm

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

    # July 11, 2012 at 9:01 pm

    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!

    # July 11, 2012 at 9:10 pm

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

    # July 11, 2012 at 9:23 pm

    Of course support is horrible…lol, just needed to throw it out there though!

    # July 11, 2012 at 9:55 pm

    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 ;)

    # July 11, 2012 at 10:14 pm

    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.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".