Forums

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

Home › Forums › CSS › Tip: This is how you can get responsive border-collapse on floated divs

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 18, 2013 at 3:51 am #150456
    Håkan Save Hansson
    Participant

    Finally I found a way to make borders around my floated divs collapse like on table cells. The key was to use box-shadow instead of border. (So this is actually a trick to simulate borders.)

    I couldn’t use display:table-cell because table cells don’t get rearranged vertically the way I want in responsive scenarios.

    Check out this CodePen: http://codepen.io/Hawkun/full/rsIEp

    September 18, 2013 at 4:16 am #150463
    Paulie_D
    Member

    I’ve always just turned individual borders off and on with CSS in media queries but that’s a handy tip.

    September 19, 2013 at 7:02 am #150579
    Paulie_D
    Member

    Using negative margin should works too (div {border:2px solid gray;margin-left:-2px;margin-top:-2px})

    Yeah…but it’s ugly…and uses magic numbers!

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