right menu sticks to bottom of main div-CodePudding

So I created 3 divs, one for the left-menu (displaying chapters to jump to) one for the main article displaying images, and one for the right-menu (displaying small paragraphs) my problem is, the right-menu would stick to the bottom of the main div, instead of sticking to the main menu's right side.

Can anybody help ?

.menu {
  float: left;
  width: 20%;
  background-color: #536162;
  height: 100vh;
  border-right: 2px solid #424642;
}

.main {
  float: left;
  text-align: center;
  width: 60%;
  margin: auto;
  padding: 15px;
  background-color: #b1aea2;
}

.menu-right {
  float: left;
  width: 20%;
  background-color: #536162;
  border-left: 2px solid #424642;
  position: relative;
}

<div style="overflow:auto">
  <div >
    <p >Chapter 1</p>
    <p >Chapter 2</p>
    <p >Chapter 3</p>
    <p >Chapter 4</p>
  </div>

  <div >
    <img id="img"  src="daisy.jpg">
    <img id="img"  src="daisy.jpg">
    <img id="img"  src="daisy.jpg">
    <img id="img"  src="daisy.jpg">
    <img id="img"  src="daisy.jpg">
    <img id="img"  src="daisy.jpg">
  </div>

  <div >
    <p >Info 1</p>
    <p >Info 2</p>
    <p >Info 3</p>
    <p >Info 4</p>
  </div>
</div>

CodePudding user response：

That's exactly where display:grid is good for! Personally I avoid using float if I can.

If you change the first div (the one that wraps all other) to something like this: <div style="overflow:auto"> and add the following css it should work.

.wrapper {
  display: grid;
  grid-template-columns: 20% 60% 20%;
  align-items: start; /* Only if you want the columns not being 100% height. */
}

.menu {
    background-color: #536162;
    height: 100vh;
    border-right: 2px solid #424642;
}
.main {
    text-align: center;
    margin: auto;
    padding: 15px;
    background-color: #b1aea2;
}
.menu-right {
    background-color: #536162;
    border-left: 2px solid #424642;
    position: relative;
}

If you want to know more about it, here is a nice article/website: https://css-tricks.com/snippets/css/complete-guide-grid/

CodePudding user response：

First, you should set its float to right. you set it to left. that's why it stuck to the left.

Second An important thing you must understand is that every pixel is calculated. even the borders are calculated when you add them to the width, so you must ensure that you calculate them right.

here I reset the CSS and set menu-right float to right then commented your borders and padding then it stuck to the right where you want it.

* {
  padding: 0;
  margin: 0;
}

.menu {
  float: left;
  width: 20%;
  background-color: #536162;
  height: 100vh;
  /* border-right: 2px solid #424642; */
}
.main {
  float: left;
  text-align: center;
  width: 60%;
  margin: auto;
  /* padding: 15px; */
  background-color: #b1aea2;
}
.menu-right {
  float: right;
  width: 20%;
  background-color: #536162;
  /* border-left: 2px solid #424642; */
  position: relative;
}

 <div style="overflow:auto">
        <div >
            <p >Chapter 1</p>
            <p >Chapter 2</p>
            <p >Chapter 3</p>
            <p >Chapter 4</p>
        </div>
    
        <div >
            <img id="img"  src="daisy.jpg">
            <img id="img"  src="daisy.jpg">
            <img id="img"  src="daisy.jpg">
            <img id="img"  src="daisy.jpg">
            <img id="img"  src="daisy.jpg">
            <img id="img"  src="daisy.jpg">
        </div>
                
        <div >
            <p >Info 1</p>
            <p >Info 2</p>
            <p >Info 3</p>
            <p >Info 4</p>
        </div>
    </div>

I hope my answer helps you.