Grow your CSS skills. Land your dream job.

Another 100% height issue

  • # April 10, 2013 at 6:36 am

    Hey guys,
    Here’s code example:

    http://jsfiddle.net/kA29C/

    Column one should be same height as Column two. How can I do this?

    Thank you.

    # April 10, 2013 at 7:20 am

    Well, you can fake it: http://jsfiddle.net/kA29C/1/

    Don’t know why the center is off by a few pixels though :(

    # April 10, 2013 at 7:36 am

    I’m not sure why did you added :after, it’ll work without it. Hah I’m not sure also but gradient idea works on my primary webpage as it should. Thanks.

    # April 10, 2013 at 7:48 am

    That after is just some clearfix, without it you won’t see the background on the #wrap (at least on that fiddle). You gave it `height: 100%`, but that only works untill scrolling.

    By the way you can replace the gradient with a regular image if you need better browser support, else make sure to include at least vendor prefixes. :)

    # April 10, 2013 at 8:09 am

    Okay I’ve just noticed that actually it wasn’t working, it was off by few pixels. To fix this I use:

    background: linear-gradient(to right, #65ad3d 160px, #fff 161px);
    background-size: 160px 100%;
    background-repeat: no-repeat;

    http://jsfiddle.net/kA29C/3/

    # April 10, 2013 at 8:27 am

    In that case (the fiddle) you could have done just `-webkit-linear-gradient(left, red, red);` (or a small red background image), since the blue you see is from the background-color.

    # April 10, 2013 at 8:35 am

    there is a workaround with floats forcing the parent to contain its children http://jsfiddle.net/kA29C/4/

    # April 10, 2013 at 9:15 am

    That makes sense. Thank you.

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

You must be logged in to reply to this topic.

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