position multiple html elements at the bottom without overlap-CodePudding

this may be a silly question, but I can't figure it out.

I have an HTML column that has multiple buttons in it. Some of these buttons I want to stack up top and others, I'd like to stack on the bottom. Is there a simple way to do this with CSS only?

Here's what I have :

* {
    box-sizing: border-box;
}

body {
    height:100vh;
    margin:0;
    font-family: 'Open Sans';
}

.grid{
    display:grid;
    grid-template-columns: max(13%, 200px) auto;
    height:100%;
}

.left-column{
    background: linear-gradient(135deg, rgb(49, 211, 211)  -10%,rgba(0, 128, 128, 1) 45%, #040040 120%);
}

.left-column button{
    display:block;
    width:100%;
    margin: .25rem auto;
    padding:.5rem;
    background:transparent;
    font-weight: bold;
    outline: none;
    text-align: left;
    font-size:1.1rem;
    color: white;
    cursor: pointer;
    transition: 0.1s;
    border: none;
}

.bottom{
    position: absolute;
    bottom:0px;
}


.right-column{
    border: 1px black solid;
}

  <!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Theta</title>
</head>

<body><div >
    <div >
      <button  >Button up 1</button>
      <button  >Button up 2</button>
      <button  >Button up 3</button>


      <button >Button down 2</button>
      <button >Button down 1</button>
    </div>
    <div >
      <h1> stuff goes here</h1>
    </div>
  </div>
  </body>

</html>

You can see that absolute positioning of the bottom works if you only have 1 element down there, but I have multiple. Any ideas how to get them down there? I have gotten around it by calculating the height of the button, and then using JS to change the height of each button in a loop, but I'd prefer a CSS/HTML only solution!

Thanks!

CodePudding user response：

You can split the buttons into two sections (as seen below into top buttons & bottom-buttons div), place them inside the left-column class and set display: flex; to the left-column class, since you want them to go from top to bottom I set a flex direction: column; now the magic in setting the top and bottom positions is simply by setting a justify-content: space-between; Hope this one helps

HTML

<div >
 <div >
  <div >
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
  </div>
  <div >
   <button>Button 1</button>
   <button>Button 2</button>
   <button>Button 3</button>
  </div>
 </div>
 <div >
  <h1> stuff goes here</h1>
 </div>

CSS

 * {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  font-family: 'Open Sans';
}

.grid {
  display: grid;
  grid-template-columns: max(13%, 200px) auto;
  height: 100%;
}

.left-column {
  background: linear-gradient(135deg, rgb(49, 211, 211) -10%, rgba(0, 128, 128, 1) 45%, #040040 120%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left-column button {
  display: block;
  width: 100%;
  margin: 0.25rem auto;
  padding: 0.5rem;
  background: transparent;
  font-weight: bold;
  outline: none;
  text-align: left;
  font-size: 1.1rem;
  color: white;
  cursor: pointer;
  transition: 0.1s;
  border: none;
}

.right-column {
  border: 1px black solid;
}