Take a look at this simple code - fiddle here.
The CSS is as follows:
.subcontent > div {
display: table-cell;
}
.orangebox {
width: 55%;
background-color: red;
padding-top: 6px;
}
.bluebox {
width: 43%;
background-color: blue;
padding-top: 60px;
}
.spacer{
width: 1%;
}
The code showcases two types of boxes, one styled with "orangebox" and another adjacent to it in the same line styled with "bluebox". Both have the property "display: table-cell".
Between these two boxes, there is the "spacer" that creates space between them using a width of 1%.
The issue arises when zooming in or out on the webpage (CTRL + or -), as the spacer starts expanding beyond 1% during zoom out, gradually decreasing its size. Additionally, deep zooming causes the spacer to disappear, leading to overlap between the two boxes.
Is there a solution to maintain a fixed space between the two boxes regardless of zoom level?