In a recent project of mine, I utilized two containers positioned side by side. Upon clicking a button, my goal was to have the content container (essentially a false body) decrease its width while the menu container would slide in.
Despite my best efforts, I found that the transition wasn't seamless without some tricky JavaScript (which didn't align with the desired aesthetic). Additionally, in the far right area where the menu was meant to reside most of the time, the menu would shift down without any margins.
https://i.sstatic.net/R6ErY.png
This issue perplexes me because no matter how I adjust the translation or reduce the width of the containers, the problem persists. Am I overlooking something?
HTML
<body>
<main>
<p>Container.</p>
</main>
<aside>
<p>Menu.</p>
</aside>
</body>
CSS
body {
padding: 0;
margin: 0;
}
main {
float: left;
border: 1px solid black;
transform: translate(0px, 0px);
width: 100%;
}
aside {
float: right;
border: 1px solid red;
transform: translate(450px, 0px);
width: 450px;
}