Answered Div gets pushed downwards even without top margin

[yumedoll]

Can someone help me with this? I'm making changes to my personal site and I added these "sidebars" to it. Everything looked fine until I added my links into the left sidebar div, and it just got pushed downwards like this:


Here's the code in question (With the container in case you can find an issue there, but without the footer because I feel it would cause too much clutter):

<style>
    #welcome{
      margin: -15px auto 10px auto;
      background-color: transparent;
      height: fit-content;
      width: fit-content;
    }

#menu{
background: transparent;
width: 1000px;
height: fit-content;
display: block;
z-index: 500;
margin-left: auto;
margin-right: auto;
}

.menubutton{
margin-left: -6px;
margin-right: -6px;
}

#sidebarA{
margin-right: 0px;
height: 700px;
width: 200px;
}

#sidebarB{
margin: 0px;
height: 700px;
width: 200px;
}

#mainmiddle{
margin-top: -900px;
height: 700px;
width: 700px;
margin-left: 2px;
margin-right: 2px;
}

  </style>

  <!--CONTAINER-->

  <div id="container" style="height: fit-content; width: 1300px; margin: auto; background-color: transparent; overflow: hidden;">

    <div id="welcome">
      <h1><img
          src="https://external-media.spacehey.net/media/sjVDClvRJtyJS0GtnlJXTaXHyKgM__NOkHIFvkcH7VOM=/https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf2836cb-5893-4a6c-b156-5a89d94fc721/daymb2u-003381dc-4894-492f-b818-c8093b6ea054.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmMjgzNmNiLTU4OTMtNGE2Yy1iMTU2LTVhODlkOTRmYzcyMVwvZGF5bWIydS0wMDMzODFkYy00ODk0LTQ5MmYtYjgxOC1jODA5M2I2ZWEwNTQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.t6hjrd0WGJL1iRZQD5pd1f2RGnPeuYE1U0wEZyv7DJo"
          style="filter: hue-rotate(25deg)" height="60px"><img src="https://yumekawahanachi.neocities.org/logo.png" height="80px"><img
          src="https://external-media.spacehey.net/media/suoDBRLX9OeW7cwlT9O1MdW--8QvR-PiILMZxe6OlIDc=/https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf2836cb-5893-4a6c-b156-5a89d94fc721/daymbdh-c5acfef0-0b27-479c-a96a-9198f0357921.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmMjgzNmNiLTU4OTMtNGE2Yy1iMTU2LTVhODlkOTRmYzcyMVwvZGF5bWJkaC1jNWFjZmVmMC0wYjI3LTQ3OWMtYTk2YS05MTk4ZjAzNTc5MjEuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.e05TlDKYRDnSrWCGsgXbyTQOysCuYJGYeQ33dEqAU-U"
          style="filter: hue-rotate(25deg)" height="60px"></h1>
    </div>

<div id="menu">
<a class="menubutton" href="#"><img src="https://yumekawahanachi.neocities.org/menu/home.png"></a>
<a class="menubutton" href="#"><img src="https://yumekawahanachi.neocities.org/menu/blog.png"></a>
<a class="menubutton" href="#traumacore-gallery"><img src="https://yumekawahanachi.neocities.org/menu/traumacore.png"></a>
<a class="menubutton" href="https://yumekawahanachi.neocities.org/playroom"><img src="https://yumekawahanachi.neocities.org/menu/playroom.png"></a>
<a class="menubutton" href="#"><img src="https://yumekawahanachi.neocities.org/menu/request.png"></a>
</div>

<!--SIDEBARLEFT-->
<div id="sidebarA" class="panel">

<!--LINKS-->    
<div style="border-radius: 20px; border: dotted #ffb3cc 3px; width: 190px; margin: 5px; height: fit-content;">
        <p align="middle">

          <a class="button" align="middle" href="https://twitter.com/angel_hanachi"
            style="font-family: monospace; color: #ffb3cc; font-size: 20px; width: 150px; font-weight: bold; display: block;">twitter</a>
           
          <a class="button" align="middle" href="https://spacehey.com/angel_hanachi"
            style="font-family: monospace; color: #ffb3cc; font-size: 20px; width: 150px; font-weight: bold; display: block;">spacehey</a>
           
          <a class="button" align="middle" href="https://instagram.com/angel_hanachi"
            style="font-family: monospace; color: #ffb3cc; font-size: 20px; width: 150px; font-weight: bold; display: block;">instagram</a>
        </p>
      </div>
<!--LINKS END-->

</div>

<!--MAINMIDDLE-->
<div id="mainmiddle" class="panel">
<iframe src="https://yumekawahanachi.neocities.org/home" height="700px" width="700px" style="border: 0"></iframe>
</div>

<!--SIDEBARRIGHT-->
<div id="sidebarB" class="panel">
</div>

<!--MAINDONE-->

</div>
<!--CONTAINER END-->

Also have to add, I added a negative top margin to the middle "part"(???) because it faced the same issue even with nothing inside of it.

 

[yumedoll]

I attempted to add a negative margin to "sidebarA" too but it didn't seem to do anything.

 

[JosiahMaybe]

There is also padding property so have you tried setting that to zero?

 

[yumedoll]

Oooo I'll go and try that. Maybe it'll help. I'm going to try getting rid of the padding in all the divs and I'll let you know how it goes.

EDIT: Nope, no effect : P

#sidebarA{
margin-right: 0px;
height: 700px;
width: 200px;
padding: 0px;
}

#sidebarB{
margin: 0px;
height: 700px;
width: 200px;
padding: 0px;
}

#mainmiddle{
margin-top: -900px;
height: 700px;
width: 700px;
margin-left: 2px;
margin-right: 2px;
padding: 0px;
}

<div id="container" style="height: fit-content; width: 1300px; margin: auto; background-color: transparent; overflow: hidden; padding: 0px;">

It's so weird to me because from all my experimentation, as long as the content stays within a div, it shouldn't effect the position of what's outside. So seeing this happen is like a fever dream. And unpleasant one tbh

 

[yumedoll]

Hmmmmmm, I know this sounds like a psycho move but....

What if I made another container, within the master container, with a limited height? I'll go try that.

EDIT:
Nope, it still goes down but now it just cuts off : P

<style>
#areacolumn{
height: 700px;
width: 1300px;
margin-right: auto;
margin-left: auto;
padding: 0px;
overflow: hidden;
}
</style>

<!--AREA COLUMN-->
<div id="areacolumn">

<!--LITERALLY ALL THREE DIVS-->

</div>

EDIT2: WAIT I GOT IT. I forgot flexboxes were a thing. Sorry 😛

Mods are free to close this one, delete or maybe leave it up if somebody who is just as as forgetful as me needs help lol