Grow your CSS skills. Land your dream job.

how to do a short line using css

  • # July 17, 2013 at 7:31 pm

    Hi – I have 3 columns of content, the height of each can vary.

    I want to put a thin line of fixed height 150px on the far left, but always at the bottom – IE from the lowest point of the longest column, rising 150px. Suggestions please?

    # July 18, 2013 at 3:36 am

    Do you have an image of the effect you’re trying to do? It should help.

    # July 18, 2013 at 4:16 am

    You could wrap the 3 columns within a div, make the columns 100% height and apply the line to the wrapper div, something like that here: http://cdpn.io/mqskd

    # July 18, 2013 at 4:39 am

    You can follow the sticky footer concept…
    make the colums div relative, and add a absolute position div for the lines.

    # July 18, 2013 at 5:32 am

    Put it on the columns’ parent, as absolute positioned pseudo-element: http://jsfiddle.net/xq8FJ/

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

You must be logged in to reply to this topic.

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