Grow your CSS skills. Land your dream job.

Vertical border/line between columns full browser height?

  • # November 27, 2012 at 8:00 am

    Good Morning,

    I’m curious if there is a method using css borders to create a vertical line between grid columns which runs 100% of the browser height?

    Here is reference example, however this website is using a background image instead.
    http://bench.li

    *EDIT*
    If there is not a solution to this, could someone please suggest a method using the background image that can act responsive? Thank You.

    # November 27, 2012 at 8:08 am

    There is using the flexbox property but that is so new that browser support is strictly limited to the latest versions only (IE10 / Chrome 23 /FF17) AFAIK.

    Otherwise….no.

    You can fake it with faux columns but that’s the only way.

    # November 27, 2012 at 8:17 am

    Think this could do the trick perhaps…

    http://codepen.io/anon/pen/ckFvs

    # November 27, 2012 at 8:39 am

    Does that work on a responsive site?

    # November 27, 2012 at 9:59 am

    @NSR About the only solution that is vaguely responsive is to use a background gradient color to fake a column.

    # November 27, 2012 at 10:14 am

    Ya im finding some difficulties with this for sure. How would the BG gradient work exactly?

    # November 27, 2012 at 10:17 am

    I’m essentially trying to add a 100% height line in the columns of this code pen grid example…

    http://codepen.io/bradfrost/pen/kpFzD

    # November 27, 2012 at 10:35 am

    You just have to define a gradient with color stops in the right place.

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