Is this the only way to collapse floating boarders?

HTML & CSS
1

use box-shadow instead of border. So this is actually a trick to simulate borders.

2

You could use an outline:-

outline: 1px solid black
1 Like
3

Why do you want to simulate borders? Why not actually use borders?

4

How would you do border collapse on float?

5

Yes that’s one way to do it because the box-shadow is outside the box and therefore the borders overlap to form one border. As Sam said outline could do exactly the same and both are good methods.

Another way is to apply a negative margin to top and bottom to offset the adjoining double border.

e.g.

  /* And here comed the trick: */
  border:1px solid #000;
  margin:0 -1px -1px 0

The problem with the negative margin is that the last item will drag whatever comes next 1px nearer so it does depend on what happens next. The benefit of the border method is that you won’t find things being cut-off where overflow becomes an issue but that is likely to be on edge cases only.

As usual with css there are many ways to do the same thing and there will be benefits or drawbacks depending on what happens next and therefore there may often be no right way to do something as it will vary with situation.

3 Likes
6

How do I make rows on float?

7

would overflow:hidden; work for that?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.