layering weird on website? - ☔︎ ∙ I need Help!

segacds
Newbie

⛺︎ My Room
SpaceHey: Friend Me!

Guild Memberships:

Artifacts:

layering weird on website?

« on: June 11, 2026 @134.83 »

im working on a page (music warning) and i want to put the div box in the middle and 2 dividers surrounding it (on the outside of the box), but the layering seems to be messed up and the dividers are there, the box is just on top of it. it might be an issue with the display set for the div again which i always struggle with lol

here is my code:

Code

<!DOCTYPE html>
<html>
  <head>
  <style>
  .navigation-section {
      text-align: center;
      display: block;
    }
    .navbar {
  background-color: black;
  display: inline-block;
  width: 100%;
  height: auto;
  border: 2px;
  border-style: transparent;
  position: fixed;
  top: 0;
  text-align: center;
  font-size: 30px;
}
   .content-section {
      display: flex; 

width: 800px;
      flex-wrap: wrap; 

      justify-content: center; 
      margin: 0 auto;
    }
    .box {
      display: flex;
      justify-content: center;
      background-color: black;
      border: 2px red;
      border-style: dotted;
      padding: 5px;
      margin: 5%;
      position: absolute;

      width: 60%;
    }
    .box-section {
     flex: 1;
     margin: 1em;
     padding: 1px;
     text-align: center;
     color: red;
     overflow: hidden;
     overflow-y: auto;
     position: left;
     height: 30%;
    }
    .box-img {
      flex: 1;
     margin: 1em;
     padding: 1px;
     text-align: center;
     color: red;
     overflow: hidden;
     height: auto;
    }
     h1 {
       text-shadow: 5px 5px 0px red;
       color: white;
     }
.divider {
display: flex;
position: center;
}
.np {
  color=white;
}
  </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MACHINE GIRL</title>
    <link href="mchngrl.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
  <div class="navbar">
      <a href="/index.html">home</a> <a href="/about.html">about</a> <a href="/posts/archive.html">blog</a> <a href="/shrinesindex.html">shrines</a href> <a href="http://users.smartgb.com/g/g.php?a=s&i=g19-03093-42">guestbook</a>
</div>
  <div class="content-section">
  <h1>oh... my ass is big...</h1>
<div class="divider">
  <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" width=100% height=50%>
</div>
  <!-- <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/album/1GezMTE4OA4tikMDBQK5u3?utm_source=generator&theme=0" width="50%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->
  <div class="box">
  <div class="box-img">
  <sub><a href="https://machinegirl.bandcamp.com/">BANDCAMP</a> <a href="https://www.instagram.com/machin3gir1/?hl=en">INSTAGRAM</a> <a href="https://www.youtube.com/@Machin3gir1">YOUTUBE</a></sub>
  <img src="https://f4.bcbits.com/img/a2086453290_10.jpg" width=100%>
  <sub>MOST RECENT RELEASE: <a href="https://machinegirl.bandcamp.com/album/psychowarrior-mg-ultra-x">PSYCHOWARRIOR: MG ULTRA X</a></sub>
  </div>
  <div class="box-section">
  <p><b>MACHINE GIRL</b> (also known as machin3g1rl or MCHNGRL) is an electronic music project created by <a href="https://www.instagram.com/popular/matt-stephenson/">Matt Stephenson</a> and based in <b>Long Island, NY</b>. In 2015, Sean Kelly was recruited to play live drums and the project became a duo. Lucy Caputi also joined in 2024 to play live guitar.</p>
  <h5>WHAT IS MACHINE GIRL?</h5>
  <p>Machine Girl's sound can be described as many things-- people opt to describe it as electronic, digital hardcore, breakcore, jungle, or gabber. Their music is wide-reaching enough that I think it could be described as any of these things, but I think their music is so distinct that it's simply Machine Girl.</p>
  <h5>ATTENDED CONCERTS</h5>
  <li>
  <ul>Oct 30, 2025 - MCHNGRL at Knockdown Center, Queens</ul>
  <ul> Apr 26, 2023 - MCHNGRL at Franklin Music Hall, Philadelphia </ul>
  </li>

  </div>
  
  </div>
<div class="divider">
  <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" width=100% height=50%>
</div>
<!-- <div class="np">
<marquee><sub>NOW PLAYING: Congratulations</sub></marquee>
</div> 
-->
  </div>
  <audio src="https://files.catbox.moe/aqc0vl.mp3" loop autoplay>
  </body>
</html>


	Logged

chilblands
Casual Poster ⚓︎

make it happen or regret
⛺︎ My Room

Guild Memberships:

Artifacts:

Re: layering weird on website?

« Reply #1 on: June 11, 2026 @214.84 »

I try to mean the nicest way possible, I think you need to let go of the display:flex and look into display:grid to help with your layout. I guess float:auto (left/right) works as well but it may require you to change the postition attributes. Resources: W3Schools and CSS Tricks

Also, I looked at your code and your spaces are flagged as invisible unicode so I removed it. Pressing tab or space works just fine so I hope there really aren't invisible unicodes in your code. The code have the CSS grid already in it and it is not complete. Height and width adjustment is needed!!

Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MACHINE GIRL</title>
        <link href="/mchngrl.css" rel="stylesheet" type="text/css" media="all">
<style>
.container {
    display: grid;
    position: relative;
    grid-template:
    "navbar box content-section"/1fr 2fr 1fr;
}
.navigation-section {
    text-align: center;
    display: block;
}
.navbar {
    background-color: black;
    display: inline-block;
    width: 100%;
    height: auto;
    border: 2px;
    border-style: transparent;
    top: 0;
    text-align: center;
    font-size: 30px;
}
.content-section {
    width: auto;
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 0 auto;
}
.box {
    display: flex;
    justify-content: center;
    background-color: black;
    border: 2px red;
    border-style: dotted;
    padding: 5px;
    margin: 5%;
    width: 60%;
}
.box-section {
    display: block;
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    overflow-y: auto;
    height: 30%;
}
.box-img {
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    width: 500px;
}
h1 {
    text-shadow: 5px 5px 0px red;
    color: white;
}
.np {
    color: white;
}
</style>
    </head>
<body>

<div class="container">
<div class="navbar">
    <a href="/index.html">home</a> <a href="/about.html">about</a> <a href="/posts/archive.html">blog</a> <a href="/shrinesindex.html">shrines</a href> <a href="http://users.smartgb.com/g/g.php?a=s&i=g19-03093-42">guestbook</a>
</div>

<div class="box">
    <div class="box-img">
        <sub><a href="https://machinegirl.bandcamp.com/">BANDCAMP</a> <a href="https://www.instagram.com/machin3gir1/?hl=en">INSTAGRAM</a> <a href="https://www.youtube.com/@Machin3gir1">YOUTUBE</a></sub>
        <img src="https://f4.bcbits.com/img/a2086453290_10.jpg" style="width:100%;;">
        <sub>MOST RECENT RELEASE: <a href="https://machinegirl.bandcamp.com/album/psychowarrior-mg-ultra-x">PSYCHOWARRIOR: MG ULTRA X</a></sub>
    </div>
    <div class="box-section">
        <p><b>MACHINE GIRL</b> (also known as machin3g1rl or MCHNGRL) is an electronic music project created by <a href="https://www.instagram.com/popular/matt-stephenson/">Matt Stephenson</a> and based in <b>Long Island, NY</b>. In 2015, Sean Kelly was recruited to play live drums and the project became a duo. Lucy Caputi also joined in 2024 to play live guitar.</p>
        <h5>WHAT IS MACHINE GIRL?</h5>
        <p>Machine Girl's sound can be described as many things-- people opt to describe it as electronic, digital hardcore, breakcore, jungle, or gabber. Their music is wide-reaching enough that I think it could be described as any of these things, but I think their music is so distinct that it's simply Machine Girl.</p>
        <li>ATTENDED CONCERTS
            <ul>Oct 30, 2025 - MCHNGRL at Knockdown Center, Queens</ul>
            <ul> Apr 26, 2023 - MCHNGRL at Franklin Music Hall, Philadelphia </ul>
        </li>
    </div>
</div>


<!-- <div class="np">
<marquee><sub>NOW PLAYING: Congratulations</sub></marquee>
</div> 
-->

<div class="content-section">
    <h1>oh... my ass is big...</h1>
        <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" style="width:100%">
</div>
    <!-- <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/album/1GezMTE4OA4tikMDBQK5u3?utm_source=generator&theme=0" width="50%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->

</div> <!-- end container -->

<audio src="https://files.catbox.moe/aqc0vl.mp3" loop autoplay>
</body>
</html>


	Logged

it's getting cold in here...

Artifact Swap:

larvapuppy
Sr. Member ⚓︎

World's Worst Baby Seal
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: layering weird on website?

« Reply #2 on: June 11, 2026 @810.90 »

Can you do a mock up drawing of what you want the layout to look like?  


	Logged

Artifact Swap:

segacds
Newbie

⛺︎ My Room
SpaceHey: Friend Me!

Guild Memberships:

Artifacts:

Re: layering weird on website?

« Reply #3 on: Today at @46.46 »

Quote from: chilblands on June 11, 2026 @214.84

Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MACHINE GIRL</title>
        <link href="/mchngrl.css" rel="stylesheet" type="text/css" media="all">
<style>
.container {
    display: grid;
    position: relative;
    grid-template:
    "navbar box content-section"/1fr 2fr 1fr;
}
.navigation-section {
    text-align: center;
    display: block;
}
.navbar {
    background-color: black;
    display: inline-block;
    width: 100%;
    height: auto;
    border: 2px;
    border-style: transparent;
    top: 0;
    text-align: center;
    font-size: 30px;
}
.content-section {
    width: auto;
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 0 auto;
}
.box {
    display: flex;
    justify-content: center;
    background-color: black;
    border: 2px red;
    border-style: dotted;
    padding: 5px;
    margin: 5%;
    width: 60%;
}
.box-section {
    display: block;
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    overflow-y: auto;
    height: 30%;
}
.box-img {
    flex: 1;
    margin: 1em;
    padding: 1px;
    text-align: center;
    color: red;
    overflow: hidden;
    width: 500px;
}
h1 {
    text-shadow: 5px 5px 0px red;
    color: white;
}
.np {
    color: white;
}
</style>
    </head>
<body>

<div class="container">
<div class="navbar">
    <a href="/index.html">home</a> <a href="/about.html">about</a> <a href="/posts/archive.html">blog</a> <a href="/shrinesindex.html">shrines</a href> <a href="http://users.smartgb.com/g/g.php?a=s&i=g19-03093-42">guestbook</a>
</div>

<div class="box">
    <div class="box-img">
        <sub><a href="https://machinegirl.bandcamp.com/">BANDCAMP</a> <a href="https://www.instagram.com/machin3gir1/?hl=en">INSTAGRAM</a> <a href="https://www.youtube.com/@Machin3gir1">YOUTUBE</a></sub>
        <img src="https://f4.bcbits.com/img/a2086453290_10.jpg" style="width:100%;;">
        <sub>MOST RECENT RELEASE: <a href="https://machinegirl.bandcamp.com/album/psychowarrior-mg-ultra-x">PSYCHOWARRIOR: MG ULTRA X</a></sub>
    </div>
    <div class="box-section">
        <p><b>MACHINE GIRL</b> (also known as machin3g1rl or MCHNGRL) is an electronic music project created by <a href="https://www.instagram.com/popular/matt-stephenson/">Matt Stephenson</a> and based in <b>Long Island, NY</b>. In 2015, Sean Kelly was recruited to play live drums and the project became a duo. Lucy Caputi also joined in 2024 to play live guitar.</p>
        <h5>WHAT IS MACHINE GIRL?</h5>
        <p>Machine Girl's sound can be described as many things-- people opt to describe it as electronic, digital hardcore, breakcore, jungle, or gabber. Their music is wide-reaching enough that I think it could be described as any of these things, but I think their music is so distinct that it's simply Machine Girl.</p>
        <li>ATTENDED CONCERTS
            <ul>Oct 30, 2025 - MCHNGRL at Knockdown Center, Queens</ul>
            <ul> Apr 26, 2023 - MCHNGRL at Franklin Music Hall, Philadelphia </ul>
        </li>
    </div>
</div>


<!-- <div class="np">
<marquee><sub>NOW PLAYING: Congratulations</sub></marquee>
</div> 
-->

<div class="content-section">
    <h1>oh... my ass is big...</h1>
        <img src="https://pixelsafari.neocities.org/dividers/more/chain2.gif" style="width:100%">
</div>
    <!-- <iframe data-testid="embed-iframe" style="border-radius:12px" src="https://open.spotify.com/embed/album/1GezMTE4OA4tikMDBQK5u3?utm_source=generator&theme=0" width="50%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe> -->

</div> <!-- end container -->

<audio src="https://files.catbox.moe/aqc0vl.mp3" loop autoplay>
</body>
</html>

that's fair tbhh ive been told about flexboxes and theyre good for having like, multiple boxes on one page looking all nice but i guess that shouldnt be like my default LOL. tyy!


	Logged

segacds
Newbie

⛺︎ My Room
SpaceHey: Friend Me!

Guild Memberships:

Artifacts:

Re: layering weird on website?

« Reply #4 on: Today at @48.69 »

Quote from: larvapuppy on June 11, 2026 @810.90

Can you do a mock up drawing of what you want the layout to look like?

its messy LOL but this is basically the idea, the gray stuff is the dividers i want to be there


	Logged

larvapuppy
Sr. Member ⚓︎

World's Worst Baby Seal
⛺︎ My Room
iMood:

RSS:

Guild Memberships:

Artifacts:

Re: layering weird on website?

« Reply #5 on: Today at @161.00 »

I think your main issue is that you have position:absolute on your .box div. This interferes with the flow of the divs in your flex container. It causes the .box to ignore the ordering of the elements in the document and position itself independently. Most of the time when people use this they will also specify some distance from the top and/or side of the page to position the element exactly where they want it. For example if I want something to be in the top left of the page with a slight buffer I would do left:10px; right:10px. If you get rid of position:absolute here the weird layering issue will be fixed.

But there are still a couple of other issues. You are using flex-wrap:wrap in your flex container (.content-section). I would only recommend this if you have a bunch of flex items lined up in a row and you want them to travel to the next "line" instead of staying aligned when the window size is changed. (Like how words will jump to the next line if the container they're contained in changes shape). I use this on my art gallery page so that people with phones can still see my art previews at the same size, rather than having them shrink on smaller screens:



But it seems like you have these two decorative graphics and you want them to stay above and below your main page content. However, when you used flex, the two graphics aligned themselves to either side of the .box, misbehaving. You decided to use the wrapping function of flex to fix this, but it made your box weird and skinny. Maybe this is what lead you to try position:absolute on the box. The default flex instructions tell your browser to align elements horizontally; "flex-direction:row" is the default setting. But if you want them to align themselves vertically one on top of the other like in your mockup, you should use "flex-direction:column". This will make the flex items' width stretch to the width of their container as well, so you can remove "width:60%" from .box as it will look rather skinny at this point. Take a look at the result and adjust widths and heights from this point.

Summary:
Flex is OK to use here! Just make sure your intentions are clear and you are informed on how it works.
Remove "position:absolute" from .box div
Remove "flex-wrap:wrap" from .content-section div
Add "flex-direction:column" to  .content-section div
Remove "width:60%" from .box div

I think this is everything, I tested it in the inspector in my browser and it seems close to the picture you showed. If this isn't what you wanted please tag me again and I'll try my best   


	Logged

Artifact Swap:

Pages: [1]

« previous next »