Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical Divider that doesn't fully span the height of container

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #236758
    FFRedshirt
    Participant

    Hey all, I’ve been mulling this one over and I’m still not sure how to properly achieve this in a responsive page.

    The design has a vertical divider that divides 2 containers but that line does not span the height of the containers. What would be the best way to achieve this? Can it be done purely in CSS?

    http://i.imgur.com/mMs7cw6.png

    My initial stab uses a border-left on the 2nd container but I dont believe you can shorten the border?

    What do you all think?

    Thanks!

    #236759
    Shikkediel
    Participant

    I don’t think it can be done with a border. You could use an inset box-shadow though – or a background gradient but that has less browser support. Lastly, a pseudo element is also an option.

    #236760
    davidleitch
    Participant

    The way I’ve achieved this in the past is to use one of the pseudo elements on one or more of the content blocks.

    If there’s only two columns, I would favour the content block on the left, aligning the divider to the right.

    If there are more than two columns, I would favour using all content blocks, aligning the divider to the left and then display: none-ing the first content block’s divider. See example below:

    http://codepen.io/David_Leitch/full/wMqpzY/

    #236770
    FFRedshirt
    Participant

    David! That appears to definitely be the trick I am looking for! It looks like it works across majority of the browsers too!

    Thanks!

    #236773
    Shikkediel
    Participant

    inset box-shadow

    Wrong term, I was pointing at negative spread…

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.