I've scoured through numerous examples, but none seem to work for my specific situation. On my webpage, I have multiple tables nested within a <div>, which serves as a background element (as it doesn't cover the entire screen). However, whenever the window is resized or zoomed in/out, everything overlaps and creates quite a chaotic mess.
My objective is to achieve a layout similar to Stack Overflow, where regardless of resizing or zooming, everything remains in place without any movement. Here's how my background and tables are defined:
#bluebackground {
background-color: #a4ceff;
height: 50%;
width: 90%;
position: absolute;
top: 20%;
left: 5%;
}
.table1 {
color: white;
margin-bottom: 10px;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-weight: bold;
border-collapse: collapse;
border: 3px solid white;
border-radius: 3px;
width: 90%;
top: 50%;
left: 5%;
padding-bottom: 0px;
position: relative;
padding-left: 0px;
padding-top: 0px;
padding-right: 100px;
font-size: 80%;
}