CODEWITHSUNDEEP
htmlcss
Dmitry
Dmitry

Reputation: 316

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

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>
            <a href="/">Home</a>
        </div>
        <div>
            <a href="/1234">1234</a>
        </div>
        <div>
            <a href="/settings">Settings</a>
        </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.

enter image description here

Upvotes: 1

Views: 538

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23490

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>
          <a href="/">Home</a>
      </div>
      <div>
          <a href="/1234">1234</a>
      </div>
      <div>
          <a href="/settings">Settings</a>
      </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>

Upvotes: 1

Related Questions