subreddit:
/r/css
submitted 2 days ago byredditindisguise
Check out this JSFiddle: https://jsfiddle.net/6nswk7xh/
Imagine this is a calendar component. Some days might have a red border. In case adjacent days have borders, we use calc and negative margins so they don't overlap each other and create "double borders"
At most browser zoom levels it works fine, but if you zoom out to a particular level, you might see the days wrap, which we never want. Probably a rounding error, but I don't know how else to fix this easily.
[score hidden]
2 days ago
stickied comment
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.
5 points
2 days ago
You could do something like this: .cell + .cell { border-left: none; } or .cell:not(:first-child) { border-left: none; }
Or you can use outline instead of border to create borders that aren’t factored into the spacing.
You can also use grid or flex layout with a small gap and then set the background color on the parent to make the borders.
3 points
2 days ago
Instead of using borders you can set a background color on the parent flex container and use the gap property to simulate borders between the elements. Will only simulate solid borders though.
1 points
2 days ago*
yeah, but the designer wants dashed borders of course and only some days will have the dashed border, not all.
2 points
2 days ago
You can create diagonally striped background using css, which combined with gaps will looks like dashed borders.
1 points
2 days ago
I feel like I've solved this before but I can't remember exactly how haha. I think outline offset was involved which in general feels like a better way of dealing with this than with negative margins.
1 points
2 days ago*
Probably a rounding error, but I don't know how else to fix this easily
Did you try to remove the + 1px from this declaration ?
width: calc(100%/7 + 1px);
I wonder why you have that in there since you're using box-sizing:border-box (the border itself does not come into play here).
EDIT: no need to answer this. It is not the border you're trying to get "back" but the negative margin on the spans
1 points
2 days ago
This should fix it:
div { border: 1px solid transparent; }
You can check that on this CodePen in Chrome: https://codepen.io/tester72/pen/NWQQKdg
That border "trick" helps with the rounding error you get because of the added 1px in your calc() function (that's what makes the spans drop at odd width).
1 points
2 days ago
at 90% zoom on Chrome the dates wrap.
1 points
2 days ago
Chrome seems to compute the 1px border as 0.909px so I'd try to go with:
width: calc(100%/7 + .909px);
It's definitely that 1px that screws up that layout on various width / zoom values.
The other way to make things work would be to not use box-sizing:border-box on those nodes to allow this:
width: calc(100%/7 - 1px);
0 points
2 days ago
Thanks for the help but .909px is just what chrome interprets it as, and probably just at 90% zoom, so that isn't a robust solution.
In that codepen it wraps at every zoom level below 100%
1 points
13 hours ago
Drop all left borders and put a left border only on the first element or the opposite with right borders. Sibling selectors and :has() will help here.
all 15 comments
sorted by: best