Issue

This Content is from Stack Overflow. Question asked by Or Rodrigez

I’ve written a code to place two images side by side and show some text on hover, but I came across a weird behavior I can’t explain and I was wondering if anyone can explain it to me.
Everything works fine with the code, but as soon as I add borders to the .project-tile class, to add borders around the image, both images collapse to the center.
I have tried to isolate the problem but I can’t really figure it out, anyone has any idea?
codepen: https://codepen.io/pafestivo/pen/JjvNMmJ?editors=1100

Solution

This has to do with the css box-sizing property. By default, the value of box-sizing is content-box, which means the border is not constrained by the width: 400px; and instead causes the divs to overflow their width and trigger wrapping.

Setting box-sizing: border-box; on .project-tile will allow you to add borders while keeping the current positioning.

This Question was asked in StackOverflow by Or Rodrigez and Answered by Toggle It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.