HTML make left and right div with left-one position:fixed - html

Question

I want to create page with navigation menu on left side which will be fixed there.
In the center of the screen should be main content of page.
I made this:
HTML:
<div>
<Sidepanel></Sidepanel>
<div class="content">
<div class="item">
<img src="#/assets/1.jpg">
</div>
<div class="item">
<img src="#/assets/2.jpg">
</div>
<div class="item">
<img src="#/assets/3.jpg">
</div>
<div class="item">
<img src="#/assets/4.jpg">
</div>
</div>
</div>
HTML for sidepanel:
<div class="Sidepanel">
<div>
Home
</div>
<div>
1234
</div>
<div>
Settings
</div>
</div>
CSS:
.Sidepanel {
background-color: #5555FF;
float: left;
padding: 1em;
/*width: 200px;*/
height: 100%;
overflow: auto;
position: fixed;
}
.Sidepanel div {
margin: 5% 0 5% 0;
}
a {
color: black;
font-size: calc(1em + 1vw);
}
body {
margin: 0
}
.content {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
.content img {
width: 90%;
object-fit: cover;
}
And on the resulting page right div goes under left. It works well if I remove position:fixed, but then I loose fixed menu on scroll.

Answer 1

You can try with grid. Pls. look at snippet below:
.Sidepanel {
background-color: #5555FF;
padding: 1em;
height: 100%;
overflow: auto;
position: fixed;
grid-column: 1;
}
.Sidepanel div {
margin: 5% 0 5% 0;
}
a {
color: black;
font-size: calc(1em + 1vw);
}
body {
margin: 0
}
.container {
display: grid;
grid-template-columns: minmax(0,200px) 1fr;
}
.content {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
grid-column: 2;
justify-self: start;
}
.content img {
width: 90%;
object-fit: cover;
}
#media (max-width: 500px) {
.container {
grid-template-columns:30% 1fr;
}
}
<div class="container">
<Sidepanel>
<div class="Sidepanel">
<div>
Home
</div>
<div>
1234
</div>
<div>
Settings
</div>
</div>
</Sidepanel>
<div class="content">
<div class="item">
<img src="https://picsum.photos/200">
</div>
<div class="item">
<img src="https://picsum.photos/200">
</div>
<div class="item">
<img src="https://picsum.photos/200">
</div>
<div class="item">
<img src="https://picsum.photos/200">
</div>
</div>
</div>