CODEWITHSUNDEEP
csscss-grid
user11545408
user11545408

Reputation:

Is there a way to center a div inside a grid layout that already has a fixed position

I created a two column grid layout. 1st grid column has buttons that link (href) to a corresponding section on same page. When I click a button a get to that section everything works fine, but the buttons vanish as they are near the top of page. I created a fixed position to keep them always visible. With the fixed position the are also automatically positioned to the the left of the column.

I've tried:

margin: 0 auto;
 text-align: center;
 justify-items: center;

and some other random code that didn't work.

.grid {
  display: grid;
  grid-template-columns: 25% 70%;
  margin-top: 100px;
}

.btn-container {
  display: grid;
  grid-column: 1 / 1;
  grid-row: 1 / 10;
  position: fixed;
  margin-left: 50px;
}

.accordion {
  display: block;
  width: 80%;
  grid-column: 2 / 2;
  grid-row: 1 / 10;
  margin: 0 auto;
}
<div class="grid">
  <div class="btn-container">
    <button onclick="location.href='realestate101#process'" id="REprocess" class="button">Real Estate Process
          </button>
  </div>


  <div class="accordion">
    <div class="accordion one">
      <h1 class="headline" id="process">Overview of the Real Estate Process
      </h1>
      <section class="accordion-item">
        <input class="toggle-box" id="toggleId-1" type="checkbox">
        <label for="toggleId-1">Offer and Acceptance</label>
        <div class="toggle-box-content">Once the negotiation is complete, execute the contract.
        </div>
      </section>
    </div>

I need the button group in grid column 1 to be centered in the div while remaining in a fixed position. I can achieve both separately but not together.

Upvotes: 0

Views: 697

Answers (1)

Bob Farias
Bob Farias

Reputation: 65

You have to put these inside in another div for being the row. As a result, you have to define the width of theses div inside the row. In that case, I put the right one with width: 30% and the left one have 70%. Also, you have to see some proprieties about the display. In that case, I tried to work with:

display: flex;
flex-direction: column;
justify-content: center;

as you can see in the div with class="teste"

.grid {
  width: 70%;
  display: grid;
  grid-template-columns: 25% 70%;
}

.row{
  display: flex;
  flex-wrap: wrap;
}

.teste{
    width: 30%;
    height: 300px;
    background: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-container {
  display: grid;
  grid-column: 1 / 1;
  grid-row: 1 / 10;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accordion {
  display: block;
  width: 80%;
  grid-column: 2 / 2;
  grid-row: 1 / 10;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<div class='row'>
  
  <div class='teste'>
    <div class="btn-container">
      <button onclick="location.href='realestate101#process'" id="REprocess" class="button">Real Estate Process
            </button>
    </div>
  </div>

    
  <div class="grid">
    <div class="accordion">
      <div class="accordion one">
        <h1 class="headline" id="process">Overview of the Real Estate Process
        </h1>
        <section class="accordion-item">
          <input class="toggle-box" id="toggleId-1" type="checkbox">
          <label for="toggleId-1">Offer and Acceptance</label>
          <div class="toggle-box-content">Once the negotiation is complete, execute the contract.
          </div>
        </section>
     </div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Related Questions