Grow your CSS skills. Land your dream job.

Fluid side by side elements. Not so easy. Help me please !

  • # January 18, 2013 at 11:09 am

    I’m trying to do something that may seem simple but I cannot find a good solution.

    2 elements side by side ( div, span, your choice)

    Left element must takes 66% of the space

    Right element takes 33% of the space but need to have a min-width of 300px

    The problem is that when I reach 300px the right element goes under the left one.

    When the right element reach 300px I want it to stay there and the left one to start shrinking.

    Thank you for your help

    # January 18, 2013 at 11:41 am

    @RayHell, `display: table-cell;` would be your solution

    **Edit**: here’s the pen http://codepen.io/ChrisPlz/pen/Icfky

    # January 18, 2013 at 12:37 pm

    Works great thanks.
    Too bad it’s not working on IE7
    Must try to find a work around.

    # January 18, 2013 at 12:43 pm

    Yea, IE7 sucks like that..no support for table display, you could try this polyfill http://tanalin.com/en/projects/display-table-htc/

    # January 18, 2013 at 1:24 pm

    Can’t you just use a 900px media query?

    # January 18, 2013 at 2:10 pm

    ChrisP: Yeah I’ve tried it. It doesn’t behave very well..

    Paulie_D: Could work if it was used full screen, but it’s gonna be use in different sized container. Thanks anyway.

    # January 18, 2013 at 2:13 pm

    @RayHell, if IE7 support is that critical, you could always do an IE7 only stylesheet with fixed widths

    # January 18, 2013 at 2:17 pm

    im with @ChrisP on this. if old IE is messing me up i dont hesitate to serve them a stripped down style sheet.

    the future is now.

    # January 18, 2013 at 5:03 pm

    >Paulie_D: Could work if it was used full screen, but it’s gonna be use in different sized container.

    Perhaps you need to show us your design so we can better assist you.

    # January 18, 2013 at 7:53 pm

    [Here's another version](http://codepen.io/wolfcry911/full/IfsDp “”) without display: table-cell

    # January 21, 2013 at 12:33 pm

    wolfcry911 This is exactly what I need. Thank you so much

    Thank you all for your help

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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