I'm working on one page of a website that only includes two vertically aligned containers in the center of it. Currently, the post element's content and its scrollbars are overlapping with the bordered text that goes around the background images of the top and bottom containers, like this. However, I want the post element's content and its scrollbars to fit neatly inside of the container's respective background images with enough space around itself, like this instead. I've tried to play around with margin and padding sizes in the different elements, but it doesn't seem to help. How can I achieve my desired look and outcome?
Code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
*, *::after, *::before {
box-sizing: border-box;
}
/* must stay as is */
html,
body {
height: 100%;
margin: 0;
}
/* must stay as is */
body {
background-size: cover;
background-attachment: fixed;
background-image: url("https://files.catbox.moe/jn5kb6.png");
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
main {
display: grid;
grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
justify-items: center;
gap: 7em;
height: 98%;}
.top {
background: url("https://files.catbox.moe/je4qpd.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
aspect-ratio: 990 / 687;
padding: 4%;
margin: 6vh auto 0 auto;
overflow-x: hidden;
overflow-y: auto;
}
.bottom {
background: url("https://files.catbox.moe/h8qi01.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
aspect-ratio: 974 / 559;
padding: 4%;
overflow-x: hidden;
overflow-y: auto;
}
.post {
justify-content: center;
background-color: transparent;
font-size: 22px;
font-family:{select:font};
color: #000;
width: 100%;
/* top right bottom left */
padding: 20px 20px 20px 20px;
margin-top: 0vh;
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<main>
<div class="top">
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="bottom">
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</main>
</body>
</html>
I think I figured it out! I ended up making new separate div classes to house the two container's background images, topbg and bottombg. I wrapped those div's around the top and bottom container div's in the body section. This way, I could edit the margin and the padding sizes of the top and bottom containers in css styling, to change the placement of the post element content and its scrollbar position without having it affect the background images too.
Edit: I found that my original changes still skew the post element contents in the top and bottom containers in Firefox. So I added elements that specifically target Firefox for edits.
*, *::after, *::before {
box-sizing: border-box;
}
/* removes empty space at the bottom of the entire page */
html,
body {
height: 100%;
margin: 0;
}
/* entire page */
body {
background-size: cover;
background-attachment: fixed;
background-image: url("https://files.catbox.moe/jn5kb6.png");
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
/* css grid for container positions */
main {
display: grid;
grid-template-rows: minmax(0, 5fr) minmax(0, 4fr);
justify-items: center;
gap: 7em;
height: 98%;
}
/* top container */
.top {
height: 85%;
aspect-ratio: 990 / 644;
/* top left bottom right */
margin: 5% 0px 0px 3%;
padding: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: auto;
}
/* edit here to target elements specifically in firefox */
@-moz-document url-prefix() {
.top {
/* top left bottom right */
margin: 3% 0 0 24%;
padding: 0px 0px 0px 0px;
}
}
/* top container background */
.topbg {
background: url("https://files.catbox.moe/je4qpd.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
aspect-ratio: 990 / 687;
margin: 6vh auto 0 auto;
}
/* posts inside container */
.post {
justify-content: center;
background-color: transparent;
font-size: 22px;
font-family:{select:font};
color: #000;
width: 100%;
/* top right bottom left */
padding: 0px 20px 0px 20px;
margin-top: 0vh;
overflow-x: hidden;
overflow-y: auto;
}
/* bottom container */
.bottom {
height: 85%;
aspect-ratio: 974 / 559;
/* top left bottom right */
margin: 5% 0% 0px 6%;
padding: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: auto;
}
/* bottom container background */
.bottombg {
background: url("https://files.catbox.moe/h8qi01.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 100%;
aspect-ratio: 974 / 559;
}
/* edit here to target elements specifically in firefox */
@-moz-document url-prefix() {
.bottom {
/* top left bottom right */
margin: 3% 0 0 24%;
padding: 0px 0px 0px 0px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
</style>
</head>
<body>
<main>
<div class="topbg">
<div class="top">
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="bottombg">
<div class="bottom">
<div class="post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</main>
</body>
</html>